使用反应测试库和React-Router V6测试重定向时，DOM DO不会更新

Question

当用户单击按钮时，我正在尝试测试重定向页面（我不想使用用户jest.mock（））。 我根据test-test-react-library文档：

import { FC, ReactElement, ReactNode } from "react";
import { render, RenderOptions } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import userEvent from "@testing-library/user-event";

const WrapperProviders: FC<{ children: ReactNode }> = ({ children }) => {
  return <BrowserRouter>{children}</BrowserRouter>;
};

const customRender = (
  ui: ReactElement,
  { route = "/" } = {},
  options?: Omit<RenderOptions, "wrapper">
) => {
  window.history.pushState({}, "Home Page", route);
  return {
    user: userEvent.setup(),
    ...render(ui, { wrapper: WrapperProviders, ...options })
  };
};

export * from "@testing-library/react";
export { customRender as render };
export type RenderType = ReturnType<typeof customRender>;

homepage.tsx：

import { useNavigate } from "react-router-dom";

export default function HomePage() {
  const navigate = useNavigate();

  const handleClick = () => navigate("/other");
  return (
    <>
      <h3>HomePage</h3>
      <button onClick={handleClick}>Redirect</button>
    </>
  );
}

shomepage.tsx：

export default function Other() {
  return <h3>Other</h3>;
}

homepage.test.tsx：

import { render, RenderType } from "./customRender";
import HomePage from "./HomePage";
import "@testing-library/jest-dom/extend-expect";

describe("HomePage", () => {
  let wrapper: RenderType;
  beforeEach(() => {
    wrapper = render(<HomePage />, { route: "/" });
  });

  test.only("Should redirects to other page", async () => {
    const { getByText, user } = wrapper;

    expect(getByText(/homepage/i)).toBeInTheDocument();

    const button = getByText(/redirect/i);
    expect(button).toBeInTheDocument();
    user.click(button);
    expect(getByText(/other/i)).toBeInTheDocument();
  });
});

在我运行测试时，它失败，并且页面未更新在dom。 开玩笑是否不支持页面的重新渲染并更新DOM？还是该测试范围不在测试范围内？

Answer 1

从代码中，我可以看到您只是在渲染主页组件，并且在该组件内部您没有任何逻辑可以根据路由更改呈现新组件（我想您有那个另一个组件上的逻辑）。这就是为什么当您单击按钮时，您没有看到其他组件呈现的。

在这种情况下，我建议您仅在 window.location 对象上做出所需的断言。因此，在模拟单击按钮之后，您可以执行以下操作：

expect(window.location.pathname).toBe("/other");

Answer 2

我更新了自定义渲染并为其添加历史记录：

const WrapperProviders: FC<{ children: ReactNode }> = ({ children }) => {
  return <BrowserRouter>{children}</BrowserRouter>;
};

const customRender = (
  ui: ReactElement,
  { route = "/",
    history = createMemoryHistory({initialEntries: [route]}),
   } = {},
  options?: Omit<RenderOptions, "wrapper">
) => {
  return {
    user: userEvent.setup(),
    ...render( <Router location={history.location} navigator={history}>
         ui
        </Router>
     , { wrapper: WrapperProviders, ...options })

  };
};

现在测试通过：

describe("HomePage", () => {
  let wrapper: RenderType;
  beforeEach(() => {
    wrapper = render(<HomePage />, { route: "/" });
  });

  test.only("Should redirects to other page", async () => {
    const { getByText, user, history } = wrapper;

    expect(getByText(/homepage/i)).toBeInTheDocument();

    const button = getByText(/redirect/i);
    expect(button).toBeInTheDocument();
    await user.click(button);
    expect(history.location.pathname).toBe('/other');
});