首页 文章

Jest模拟异步调用内部反应组件

提问于
浏览 次
2

我是jest / enzyme的新手，我试图模拟对返回Promise的异步函数的调用，调用是在componentDidMount方法的react组件内部进行的 .

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

我遇到的问题是测试在数组添加到状态之前完成并通过 . 我正在尝试使用'done'回调让测试等待，直到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);
        });

      });
    });
javascript unit-testing reactjs jestjs enzyme

1 回答

  • 7

    您的测试有两个问题 . 首先，你不能像这样嘲笑 AdminApiClient . jest.mock 将仅使用 undefined 替换模块，因此 getItems.mockImplementation 将无效或将引发错误 . 也没有必要使用原来的 . 当你通过道具传递它作为参数时，你可以在测试中创建你的模拟权利 . 其次，如果您使用promises，则必须从测试中返回promise或使用 async/await （docs）：

    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);
})
    回复于

相关问题