Question

在编写React应用程序时，我有一类具有多个静态方法，每个类都执行axios请求并返回Promise。

我的组件使用该类来获取数据并呈现它们。现在，我想模拟整个类，而不是一个或两个方法，因为它们都在使用中。

示例ServerManager.ts：

export class ServerManager {
    static getUsers(): Promise<User[]> {
        return Axios.get(userPath)
            .then((response: Promise<AxiosResponse>): User[] => response.data);
    }

    // lot of similar methods
}

示例组件：

export function SomeComponent() {
    const [users, setUsers] = React.useState<User[]>([]);

    Promise.all([
        ServerManager.getUsers().then(setUsers), //...
    ]).then();

    return <div>
        {users.length ? <div>{users.length}</div>}
    </div>;
}

我想完全测试该组件，而不更改其逻辑。最好的解决方案是创建MockServerManager，导入的文件将替换原始文件，但这样做会使ServerManager未被定义。

编辑：我已经在__mocks__目录中创建了这样一个模拟：

export class MockServerManager {
    static getUsers(): Promise<User[]> {
        return Promise.resolve([user]);
    }

    // ... more methods
}

jest.mock('../../src/ServerManager', () => ({
    ServerManager: MockServerManager
}));

现在开始...诺言永无止境。测试正在等待承诺，除非超时。

样本测试：

describe('SomeComponent', (): void => {
    it('renders', async (): Promise<void> => {
        // when
        const wrapper: ShallowWrapper = shallow(<SomeComponent/>);

        await ServerManager.getUsers().then(() => {
            // then
            expect(wrapper).toMatchSnapshot();
        });
    });
});

Answer 1

尝试在MockServerManager组件中导入ServerManager，因为当我们不将组件导入基本组件（即MockServerManager）时，它通常会显示此错误，或者是因为您在该组件中使用道具而不声明道具的属性。

使用Promises的Jest模拟静态方法

1 个答案: