「前端测试」vitest都在借鉴的fixtures究竟是怎么实现的，playwright源码参考实现

fixtures 源码实现

首先我们看看它的功能是什么，这是我们日常使用的情况

import { myTest as base } from "./test";

// 1、需要继承的类型
type TestFixtures = {
    requestCommon: 'RequestCommon';
};

// 2、test可继承类型
const test = base.extend<TestFixtures>({
    // 3、类型可显示使用在参数中
    requestCommon: async ({page, requestCommon}, use) => {
        await use('RequestCommon')
    }
})

// 4、test调用时类型显示使用在参数中
test('das', ({requestCommon, page}) => {

})

1、实现一个 test

支持 test 函数，字符串标题，以及内置的参数调用

// test.d.ts
type KeyValue = {
    [key: string]: any;
}

type TestType<TestArgs extends KeyValue> = {
    (title: string, testFunction: (args: TestArgs, testInfo: 'TestInfo') => Promise<void> | void): void;
}

interface PlaywrightWorkerOptions {
    context: 'BrowserContext';
    page: 'Page';
    request: 'APIRequestContext';
}

export declare const myTest: TestType<PlaywrightWorkerOptions>;

2、test 实现可继承

type TestFunction<TestArgs> = {
    (title: string, testFunction: (args: TestArgs, testInfo: 'TestInfo') => Promise<void> | void): void;
}
type KeyValue = {
    [key: string]: any;
}

type TestType<TestArgs extends KeyValue> = TestFunction<TestArgs> & {
    // 在test函数的基础上交集一个拓展的类型, 可支持传递泛型
    extend<K extends KeyValue>(): void;
}

3、实现继承类型显示使用

// 定义了函数内参数可以使用内置类型和继承类型，并且use里只能使用定义类型的值并且返回一个promise
type TestFixture<R, Args extends KeyValue> = (args: Args, use: (r: R) => Promise<void>) => any;
// 这里实现了继承对象内的值可以为基础类型，也可以是一个函数
type TestFixtureValue<R, Args extends KeyValue> = Exclude<R, Function> | TestFixture<R, Args>;

type Fixtures<T extends KeyValue = {}, W extends KeyValue = {}, TestArgs extends KeyValue = {}> = {
    // 可显示使用继承类型
    [K in keyof T]?: TestFixtureValue<T[K], T & W & TestArgs>;
} & {
    // 可显示使用内置类型
    [K in keyof TestArgs]?: TestFixtureValue<TestArgs[K], T & W & TestArgs>;
}

type TestType<TestArgs extends KeyValue> = {
    // fixtures: Fixtures<T, W, TestArgs> 将传进的泛型参数与开始定义的内置参数一起传进Fixtures里
    extend<T extends KeyValue, W extends KeyValue = {}>(fixtures: Fixtures<T, W, TestArgs>): void;
}

4、实现test中使用继承的类型

type TestType<TestArgs extends KeyValue> = TestFunction<TestArgs> & {
    // 只需要在test.extends后返回一个TestType<TestArgs & T>并且携带着继承的 T 类型即可，下次会直接带着两个类型进TestFunction<TestArgs>中
    extend<T extends KeyValue, W extends KeyValue = {}>(fixtures: Fixtures<T, W, TestArgs>): TestType<TestArgs & T>;
}