React 测试库的 waitFor 不起作用

Question

我正在使用React 测试库对我的 ReactJS 代码进行单元测试。UI 中有几个异步事件，例如获取数据和单击按钮时显示新页面。React 代码有点像这样：

// Inside ParentComponent.tsx
const [isChildVisible, setChildVisibility] = useState(false);
const showChild = () => setChildVisibility(true);

return(
  <>
      <button data-testid="show-child" onClick={showChild}>Show Child</button>
      {isChildVisible && <ChildComponent {..childProps}/>}
 </>
)

在ChildComponent安装时，它会获取一些数据，然后使用水合数据重新渲染自身。我的单元测试如下所示：

jest.mock('../../../src/service'); // mock the fetch functions used by ChildComponent to fetch its data

describe('ParentComponent', () => {
    test('renders ChildComponent on button click', async () => {
        const screen = render(<ParentComponent />);
        userEvent.click(screen.getByTestId('show-child'));
        await (waitFor(() => screen.getByText('text rendered by child')));
    });
});

当我运行此测试时，出现错误"TestingLibraryElementError: Unable to find an element with the text: text rendered by child. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible."。

我不确定为什么会发生这种情况，但原因之一可能是水合和渲染子组件需要超过一秒的时间。因此，我想更改 的默认等待时间waitFor，但我无法从文档中找到实现此操作的方法（默认等待时间为一秒）。那么是否可以更改默认等待时间？

编辑：增加等待时间仍然会导致相同的错误。所以问题是另外一回事。

Answer 1

我在这里找到了答案：React Testing Library - using 'await wait()' after fireEvent

TLDR：“您不能将 wait 与 getBy* 一起使用。getBy 不是异步的，也不会等待。” 更好的是使用 findBy*。这是 getBy 的异步版本。

Answer 2

它在文档中指定。等待文档

function waitFor<T>(
  callback: () => T | Promise<T>,
  options?: {
     container?: HTMLElement
     timeout?: number //This is 1000ms. Change timeout here.
     interval?: number
     onTimeout?: (error: Error) => Error
     mutationObserverOptions?: MutationObserverInit
  }
): Promise<T>

//For 3 seconds.
await (waitFor(() => screen.getByText('text rendered by child'),{timeout:3000}));

默认超时为 1000 毫秒，这将使您保持在 Jest 的默认超时 5000 毫秒以下。

Answer 3

当我为测试应用程序设置测试时，我遇到了与此类似的问题。我解决这个问题的方法是强制重新渲染组件。

在这种情况下，您的代码将类似于：

import {render, screen} from "@testing-library/react";

describe('ParentComponent', () => {
  test('renders ChildComponent on button click', async () => {

    const {rerender} = render(<ParentComponent />);
    userEvent.click(screen.getByTestId('show-child'));

    rerender(<ParentComponent />)
    await (waitFor(() => screen.getByText('text rendered by child')));
  });
});

我希望这对你有用。另请注意，您可以使用screen反应测试库的导出。似乎应该有一种方法可以自动执行此操作，但我还没有找到它。

添加重新渲染文档的链接：https://testing-library.com/docs/react-testing-library/api/#rerender