react组件内的 Jest 模拟异步调用

IT技术 javascript unit-testing reactjs jestjs enzyme
2021-04-15 21:43:08

我是 jest/enzyme 的新手,正在尝试模拟对返回 Promise 的 aync 函数的调用,该调用是在 componentDidMount 方法中的react组件内进行的。

该测试试图测试 componentDidMount 设置状态中 Promise 返回的数组。

我遇到的问题是测试在将数组添加到状态之前完成并通过。我正在尝试使用“完成”回调让测试等待Promise解决,但这似乎不起作用。

我试图在 done() 调用之前将 expect 调用移到该行,但这似乎也不起作用。

谁能告诉我我在这里做错了什么?

被测组件:

componentDidMount() {
  this.props.adminApi.getItems().then((items) => {
    this.setState({ items});
  }).catch((error) => {
    this.handleError(error);
  });
}

我的测试:

    import React from 'react';
    import { mount } from 'enzyme';
    import Create from '../../../src/views/Promotion/Create';

    import AdminApiClient from '../../../src/api/';
    jest.mock('../../../src/api/AdminApiClient');

    describe('view', () => {

      describe('componentDidMount', () => {

        test('should load items into state', (done) => {
          const expectedItems = [{ id: 1 }, { id: 2 }];

          AdminApiClient.getItems.mockImplementation(() => {
            return new Promise((resolve) => {
              resolve(expectedItems);
              done();
            });
          });

          const wrapper = mount(
            <Create adminApi={AdminApiClient} />
          );

          expect(wrapper.state().items).toBe(expectedItems);
        });

      });
    });
1个回答

你的测试有两个问题。首先你不能AdminApiClient像这样嘲笑jest.mock将用 just 替换moduleundefined,因此getItems.mockImplementation将无效或会引发错误。也没有必要使用原始的。当你通过 props 将它作为参数传递时,你可以在测试中创建你的模拟。其次,如果您使用Promise,则必须从测试中返回Promise或使用async/awaitdocs):

it('', async() = > {
  const expectedItems = [{ id: 1 }, { id: 2 }];
  const p = Promise.resolve(expectedItems)
  AdminApiClient = {
    getItems: () = > p
  }
  const wrapper = mount(
    <Create adminApi={AdminApiClient} />
  );
  await p
  expect(wrapper.state().items).toBe(expectedItems);
})
感谢您的解释,这种方法效果很好!还可以通过使用 Promise.reject() 和 try/catch 块并等待 p.catch() 以这种方式测试错误场景。
2021-06-14 21:43:08