没有在findBy前放置waitFor语句导致测试失败-React测试库

在使用 React 测试库时，当我们想要使用 findBy 方法时，需要在其前面使用 waitFor 语句来等待 findBy 找到元素后再继续执行测试。否则，测试可能会因为找不到元素而失败。

以下是一个示例代码，说明了正确使用 waitFor 和 findBy 的方法：

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import App from '../App';

test('should render "Hello, world!" after button click', async () => {
  const { getByText, getByRole } = render(<App />);
  const button = getByRole('button', { name: /click me/i });

  // Click the button
  button.click();

  // Wait for "Hello, world!" to be rendered
  await waitFor(() => {
    expect(getByText(/hello, world!/i)).toBeInTheDocument();
  });
});

在上面的代码中，我们在点击按钮后使用 waitFor 来等待 "Hello, world!" 文本的出现。在 waitFor 中使用 expect 语句来验证需要等待的内容是否已被成功渲染。只有当 waitFor 内部的 expect 语句被满足时，测试才会继续执行。

通过这种方式，我们可以确保在进行 findBy 操作前已经成功加载了所需的元素，从而避免测试失败问题。