javascript - 开 Jest 测试: Awating multiple promises in connected component

Question

我有一个连接组件 (HOC)，可以在 componentDidMount 中获取一些数据，例如:

function setData(data) {
  return { type: "SET_DATA", data: data };
}

function fetchData() {
  return axios.get("http://echo.jsontest.com/key/value/one/two");
}

function getData(dispatch) {
  return () => fetchData().then(response => dispatch(setData(response.data)));
}

class Welcome extends Component {
  componentDidMount() {
    this.props.getData();
  }

  render() {
    if (this.props.data) {
      return <div>We have data!</div>;
    } else {
      return <div>Waiting for data...</div>;
    }
  }
}

完整代码可以在这里看到:https://github.com/gylaz/react-integration-test-example/blob/eb3238c0a8aa4b15331a031d7d2d3a0aa97ef9c7/src/App.js

我的测试如下:

it("renders without crashing", async () => {
  axios.get = jest.fn(() => {
    return Promise.resolve({ data: { one: 1, two: 2 } });
  });
  const div = document.createElement("div");
  const component = await ReactDOM.render(<App />, div);

  expect(div.textContent).toEqual("We have data!");
});

完整测试代码在这里:https://github.com/gylaz/react-integration-test-example/blob/eb3238c0a8aa4b15331a031d7d2d3a0aa97ef9c7/src/App.test.js

测试顺利通过!

但是，当我修改 fetchData 方法以从响应中提取实际数据(通过 Promise)时，例如:

function fetchData() {
  return axios
    .get("http://echo.jsontest.com/key/value/one/two")
    .then(response => response.data);
}

function getData(dispatch) {
  return () => fetchData().then(data => dispatch(setData(data)));
}

测试将会失败，直到我在第一个 await 之前添加另一个 await:

it("renders without crashing", async () => {
  axios.get = jest.fn(() => {
    return Promise.resolve({ data: { one: 1, two: 2 } });
  });
  const div = document.createElement("div");
  const component = await await ReactDOM.render(<App />, div);

  expect(div.textContent).toEqual("We have data!");
});

这是显示上述内容的 PR:https://github.com/gylaz/react-integration-test-example/pull/1

我的调用链中的 then 越多，我需要添加的 await 就越多，这看起来很麻烦。

有没有更好的方法可以在测试中立即等待所有内容，或者其他解决方案？

Answer 1

我发现代替多个 await 的最好方法是将期望包装在 setImmediate 或 process.nextTick 中。而且您不需要使用async/await。

例如:

it("renders without crashing", () => {
  axios.get = jest.fn(() => {
    return Promise.resolve({ data: { one: 1, two: 2 } });
  });
  const div = document.createElement("div");
  const component = ReactDOM.render(<App />, div);

  setImmediate(() => {
    expect(div.textContent).toEqual("We have data!");
  });
});

有关 Promise 和事件外观的解释可以在 this article 中找到。 .

这种方法的一个缺点是，如果期望失败，Jest 将使测试运行器崩溃(而不是显示失败但不崩溃)。目前有一个bug，可以关注this issue on GitHub .