使用 Jest + React-testing-library 测试异步 `componentDidMount()`

我有一个异步获取数据的组件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()语句总是失败。

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

这个类似的问题 https://stackoverflow.com/questions/49419961/testing-with-reacts-jest-and-enzyme-when-async-componentdidmount and 这个要点片段 https://gist.github.com/alfonsomunozpomer/de992a9710724eb248be3842029801c8两者都展示了我如何用酶来测试这一点。本质上他们依赖async/await打电话componentDidMount()手动。

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

Thanks!

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

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

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