等待模拟呼叫中的所有承诺答案

【问题标题】：Wait on all promises in a simulate call等待模拟呼叫中的所有承诺
【发布时间】：2017-04-02 04:26:39
【问题描述】：

我正在使用 Jest 和 Enzyme 来测试 React 组件。

我的 React 组件（正在测试中）有一个远程选择组件。当用户键入一些文本时，会从 API 中获取数据并显示选项。

test('should fetch data', () => {
  // mock the API call
  const store = require('../../src/store').default;
  store.fetchData = jest.fn(() => Promise.resolve([{ 
    id: 1, 
    name: 'someText 
  }]));

  // test
  const wrapper = shallow(<Form />);
  const remote = wrapper.find('RemoteSelect').first();
  remote.simulate('fetch', 'someText');
  expect(store.fetchData).toBeCalled();

  // more test
  remote.simulate('change', 1);
  const remoteRequeried = wrapper.find('RemoteSelect').first();
  expect(remoteRequeried.prop('label')).toBe('someText');
});

当用户键入一些文本时，第一个测试从存储中获取数据。第二个测试选择一个选项。第二次测试失败。

很难解释这是一个 SO 问题。这些选项在 Promise 的“then”部分设置。 “然后”函数在第二次模拟之前没有被执行。因此，当第二次模拟被触发时，这些选项没有设置。

如果我在 setTimeout() 内移动第二个测试，则第二个测试通过。

Jest 是否有办法确保在执行更多测试之前执行承诺的“then”？

【问题讨论】：

标签： javascript reactjs jestjs enzyme

【解决方案1】：

你可以这样做：

test('should fetch data', () => {
  // mock the API call
  const store = require('../../src/store').default;
  let promise;
  store.fetchData = jest.fn(() => {
    promise = Promise.resolve([{ 
      id: 1, 
      name: 'someText', 
    }]);
    return promise;
  );

  // test
  const wrapper = shallow(<Form />);
  const remote = wrapper.find('RemoteSelect').first();
  remote.simulate('fetch', 'someText');
  expect(store.fetchData).toBeCalled();

  return promise.then((result) => {
    // more test
    remote.simulate('change', 1);
    const remoteRequeried = wrapper.find('RemoteSelect').first();
    expect(remoteRequeried.prop('label')).toBe('someText');
  });
});

【讨论】：