Question

我有一个组件可以在componentDidMount()中异步获取数据

componentDidMount() {
  const self = this;

  const url = "/some/path";
  const data = {}
  const config = {
    headers: { "Content-Type": "application/json", "Accept": "application/json" }
  };

  axios.get(url, data, config)
    .then(function(response) {
      // Do success stuff

      self.setState({ .... });
    })
    .catch(function(error) {
      // Do failure stuff

      self.setState({ .... });
    })
  ;
}

我对组件的测试如下所示-

it("renders the component correctly", async () => {
  // Have API return some random data;
  let data = { some: { random: ["data to be returned"] } };
  axios.get.mockResolvedValue({ data: data });

  const rendered = render(<MyComponent />);
  // Not sure what I should be awaiting here
  await ???

  // Test that certain elements render
  const toggleContainer = rendered.getByTestId("some-test-id");
  expect(toggleContainer).not.toBeNull();
});

由于呈现和加载数据是异步的，因此我的expect()语句继续执行并在componentDidMount()之前执行，并且虚假的异步调用完成了执行，因此expect()语句总是失败。

我想我可能会引入某种延迟，但这感觉很不正确，当然会增加测试的运行时间。

This similar question和this gist snippet都展示了如何使用酶进行测试。本质上，他们依靠async / await手动调用componentDidMount()。

但是react-testing-library似乎不允许直接访问该组件以直接调用其方法（可能是设计使然）。因此，我不确定要等待什么，或者这是否是正确的方法。

谢谢！

Answer 1

这取决于您的组件在做什么。想象一下，您的组件显示一条加载消息，然后显示一条欢迎消息。您将等待欢迎消息出现：

const { getByText, findByText } = render(<MyComponent />)
expect(getByText('Loading...')).toBeInTheDocument()
expect(await findByText('Welcome back!')).toBeInTheDocument()

最好的考虑方法是打开浏览器查看您的组件。您什么时候知道它已加载？尝试在测试中重现这一点。

用Jest + react-testing-library测试异步`componentDidMount（）`

1 个答案: