使用 Promises 的 Jest 模拟静态方法答案

【问题标题】：Jest mock static method that uses Promises使用 Promises 的 Jest 模拟静态方法
【发布时间】：2020-09-08 00:51:43
【问题描述】：

在编写 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
}));

Bot now...承诺永无止境。测试正在等待承诺，除非它超时。

样本测试：

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

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

【问题讨论】：

标签： reactjs promise mocking jestjs

【解决方案1】：

尝试在 MockServerManager 组件中导入 ServerManager，因为当我们没有将组件导入我们的基础组件（即 MockServerManager）时，它通常会显示此错误，或者这是因为您在该组件中使用了 props 并且没有声明 props 的属性。

【讨论】：

您好，感谢您的回答。但是，现在正在加载模拟，但承诺似乎是无限的。我编辑了问题。