如何测试异步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();

});

Answer 2

请尝试以下操作：

test('My Test', async () => {
  const queries = render(<MyComponent/>, container);

  expect(await queries.findByText((content, element) => element.tagName.toLowerCase() === 'span')).toBeInTheDocument();

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

我无法测试它，所以请告诉我它是否有效。

我在 react-testing-library 问题上阅读了此 this piece of documentation，然后查看了 。似乎有很多方法可以自定义这种测试行为。