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

以下是展示上述内容的公关：https://github.com/gylaz/react-integration-test-example/pull/1

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

有没有更好的方法在测试或其他解决方案中一次等待一切？

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

```

关于承诺和事件外观的解释可以在this article中找到。

这种方法的一个缺点是，如果期望失败（而不是显示失败但没有崩溃），Jest将使测试运行器崩溃。目前在this issue on GitHub中可以遵循一个错误。

开玩笑测试：在连接组件中唤醒多个承诺

1 个答案: