测试中对 BrowserRouter 的更新未包含在 act 中答案

【问题标题】：An update to BrowserRouter inside a test was not wrapped in act测试中对 BrowserRouter 的更新未包含在 act 中
【发布时间】：2022-11-25 00:33:04
【问题描述】：

我正在尝试实施我的第一个测试以与 react-test-library 反应，但我遇到了这个特定的问题，其中警告我的组件未包装在 act(..)

下面是我要执行的测试


import { BrowserRouter as Router } from "react-router-dom";
  beforeEach(() => {
    container = render(
      <Router>
        <Search />
      </Router>
    );
  });
  it("handleClick", async () => {
    const button = container.getByText("Search");
    const event = fireEvent.click(button);
    expect(event).toBeTruthy();
  });

这是我要测试的功能

  const handleClick = async () => {
    setLoading(true);
    const data = await movieAPI.fetchMovieByTitle(movie);
    setLoading(false);
    navigate(`/movie/${data.Title}`, { state: data });
  };

【问题讨论】：

标签： reactjs jestjs react-testing-library

【解决方案1】：

事实证明，在执行断言之前，我们需要等待组件更新完全完成 waitFor

  it("should render spinner", async () => {
    const button = container.getByText("Search");
    const event = await fireEvent.click(button);
    const spinner = container.getByTestId("spinner");
    await waitFor(() => {
      expect(spinner).toBeInTheDocument();
    });
  });

【讨论】：