React测试库如何使用waitFor

Question

我正在跟随一个React测试的教程。该教程有一个简单的组件，如下，演示如何测试异步操作：

import React from 'react'

const TestAsync = () => {
  const [counter, setCounter] = React.useState(0)

  const delayCount = () => (
    setTimeout(() => {
      setCounter(counter + 1)
    }, 500)
  )
  
  return (
    <>
      <h1 data-testid="counter">{ counter }</h1>
      <button data-testid="button-up" onClick={delayCount}> Up</button>
      <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
    </>
  )
}
  
export default TestAsync

测试文件就像这样：

import React from 'react';
import { render, cleanup, fireEvent, waitForElement } from '@testing-library/react';
import TestAsync from './TestAsync'

afterEach(cleanup);
  
it('increments counter after 0.5s', async () => {
  const { getByTestId, getByText } = render(<TestAsync />); 

  fireEvent.click(getByTestId('button-up'))

  const counter = await waitForElement(() => getByText('1')) 

  expect(counter).toHaveTextContent('1')
});

终端显示 waitForElement 已被弃用，应改用 waitFor 代替。 在这个测试文件中，我该如何使用 waitFor？

- lomine

Answer 1

如果你在等待外观，可以这样使用它：

it('increments counter after 0.5s', async() => {
  const { getByTestId, getByText } = render(<TestAsync />);

  fireEvent.click(getByTestId('button-up'));
  
  await waitFor(() => {
    expect(getByText('1')).toBeInTheDocument();
  });
});

当使用getByText('1')来获取元素时，检查.toHaveTextContent('1')有点“奇怪”，因此我用.toBeInTheDocument()替换了它。

- Zsolt Meszaros

---

能否使用act函数包装这个断言？根据文档，我不明白何时应该使用act，何时应该使用waitFor。 - Rob Bauer

Answer 2

目前最佳实践是在这种情况下使用 findByText。此函数是对 act 的包装器，并将查询指定元素，直到达到某个超时时间。

在您的情况下，您可以像这样使用它：

it('increments counter after 0.5s', async () => {
  const { findByTestId, findByText } = render(<TestAsync />); 

  fireEvent.click(await findByTestId('button-up'))

  const counter = await findByText('1')
});

如果元素不存在，不需要对其值调用expect函数，它会抛出异常。

您可以在此处找到有关查询类型的更多差异信息。

- Feder 240516

Answer 3

是否还有可能使用act函数来包装断言？根据文档，我不明白何时使用act和何时使用waitFor。

答案是肯定的。您可以改用act()编写此代码：

    import { act } from "react-dom/test-utils";

        it('increments counter after 0.5s', async() => {
          const { getByTestId, getByText } = render(<TestAsync />);

// you wanna use act() when there is a render to happen in 
// the DOM and some change will take place:
          act(() => {
              fireEvent.click(getByTestId('button-up'));
          });
            expect(getByText('1')).toBeInTheDocument();
        });

希望这可以帮到你。

- DToxVanilla

---

我认为这是错误的，fireEvent 应该已经在内部使用了 act。 - apieceofbart