reactjs - 测试时，导致 React 状态更新的代码应包装到 act(...)

Question

我正在测试我的组件

ForecastButtons.js

export const ForecastButtons = ({ city }) => {
  const [payload, setPayload] = useState(null)

  const getData = () => {
    fetchCityData(city).then((payload) => setPayload(payload));
  }
  const location = payload?.location?.name;
  const currentTemp = payload?.current?.temp_c;

  return(
    <div className="sm:col-span-2">
      <p className="block text-sm font-medium text-gray-700">Select forecast</p>
        <button onClick={getData} className="mt-1 bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded" type='button'>
          Today
        </button>
        <p key={city?.location?.id} className='my-5'>
          { location ? `Current weather in ${location} is ${currentTemp} degrees ` : 'Please search for city to see current weather'}
        </p>
    </div>
  )
}

这是我测试的一部分:

    test('render weather into component',  async () => {
    
      const { getByText } = render(<ForecastButtons weather={weatherResponce} city={'London'} />);
      const button = getByText('Today')
    
      await act(async () => {
        await fireEvent.click(button)
      })
      expect(getByText('London')).toBeInTheDocument();
    })

请注意，这不是整个测试，只是不起作用的部分。错误如上。正如你所看到的，我向其中添加了 act() ，但它仍然不断抛出错误:当测试时，导致 React 状态更新的代码应该包装到 act(...)

Answer 1

我可以在 React Testing Library and the “not wrapped in act” Errors 中找到一些提示Medium 上，很多案例都解释得很好。

第一个有用的学习:

React testing library already integrated act with its APIs. So in mostcases, we do not need to wrap render and fireEvent in act. Forexample:

// With react-testing-library
it("should render and update a counter", () => {
  // Render a component
  const { getByText } = render(<Counter />;
  ...  

  // Fire event to trigger component update
  fireEvent.click(getByText("Save"));
  ...
});

在我的例子中，我得到了错误(我作为初学者的假设)，因为 fireEvent.click 触发 fetchData 被调用，这是一个异步调用。当它的响应返回时，fetchCityData/getData 将被调用，但此时，更新将发生在 React 的调用堆栈之外。

解决方案

在断言之前，使用 waitFor 等待组件更新完全完成。 waitFor 是 React 测试库提供的一个 API，用于等待包装的断言在某个超时窗口内通过。

我更改了部分测试代码，如下所示:

  test('renders responce into paragraph', async () => {
    render(<ForecastButtons weatherResponce={weatherResponce} city='London' />);
    const button = screen.getByRole('button');
    const label = screen.getByText('Please search for city to see current weather');
    fireEvent.click(button)
    await waitFor(() => {
      expect(label.textContent).toBe(`Current weather in ${weatherResponce.location.name} is ${weatherResponce.current.temp_c} degrees`);
    });
  })

weatherResponce 只是对模拟 HTTP 请求的模拟响应，我是用 nock 来做的。