reactjs - 如何测试异步useEffect？

Question

如何测试异步 useEffect与 react-testing-libs ?
我有:

// in other file
const getData = () => {
  return new Promsise(resolve => setTimeout(() => resolve([1, 2, 3]), 5000));
};

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getData();
      setData(data);
    };
    fetchData();
  }, []);

  return <div>{data.map(item => <span>{item}</span>)}</div>
};

如何测试这个组件？
我现在的测试:

it('MyComponent test', async () => {
  await act( async () => {
    render(<MyComponent/>, container);
  });

  expect(container.innerHTML).toMatchSnapshot();
});

但是act，render不会等待useEffect()。
为什么 ？

Answer 1

react-testing-library 对此有一个干净的解决方案。您可以等待元素出现在 DOM 中，这意味着您的异步 useEffect顺其自然。
它叫waitFor它将在继续执行代码之前等待断言完成。您可以使用其他实用程序，例如 getByText至 expect

it('MyComponent test', async () => {
  await act( async () => {
    render(<MyComponent/>, container);
  });

  waitFor(() => {
    // I'd look for a real text here that is renderer when the data loads
    expect(container.queryElement('span')).toBeDefines();
  })

  expect(container.innerHTML).toMatchSnapshot();

});