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

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

测试正在尝试测试componentDidMount是否将承诺返回的数组设置为状态

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

我尝试将expect调用移到done（）调用之前的行，但这似乎也不起作用

有人能告诉我我做错了什么吗

正在测试的组件：

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);
        });

      });
    });

从“React”导入React；
从“酶”导入{mount}；
从“../../../src/views/Promotion/Create”导入创建；
从“../../../src/api/”导入AdminApicClient；
jest.mock（'../../../src/api/AdminApiClient'）；
描述（'视图'，（）=>{
描述（'componentDidMount'，（）=>{
测试（'应将项目加载到状态'，（完成）=>{
const expectedItems=[{id:1}，{id:2}]；
AdminApicClient.getItems.mockImplementation（（）=>{
返回新承诺（（解决）=>{
解决（预期问题）；
完成（）；
});
});
常量包装器=装入(
);
expect（wrapper.state（）.items）.toBe（expectedItems）；
});
});
});

您的测试有两个问题。首先，你不能像这样模仿管理员客户端

jest.mock

将用未定义的

替换模块，因此
getItems.mock实现将无效或抛出错误。也没有必要使用原来的。当您通过道具将其作为参数传入时，您可以在测试中创建您的on mock right。其次，如果您使用承诺，您必须从测试中返回承诺，或者使用
async/await
（）：

it（“”，async（）=>{
const expectedItems=[{id:1}，{id:2}]；
const p=Promise.resolve（expectedItems）
管理员客户端={
getItems:（）=>p
}
常量包装器=装入(
);
等待p
expect（wrapper.state（）.items）.toBe（expectedItems）；
})
感谢您的解释，这种方法非常有效！通过使用Promise.reject（）和try/catch块，并在p.catch（）上等待，还能够以这种方式测试错误场景。
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);
})