当使用Jest spyOn时，不能重新定义property: useNavigate

Question

我正在使用Jest + React测试库来测试我的应用程序。

测试文件:

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import React from "react";
import { MemoryRouter } from "react-router-dom";
import GoBack from "../Goback";
const mockUseNavigate = jest.spyOn(require("react-router-dom"), "useNavigate");
const navigate = mockUseNavigate()
describe("GoBack page", () => {
const pageInfo =
"This is error page!";
it("renders the GoBack page", async () => {
const { container } = render(
<MemoryRouter>
<GoBack />
</MemoryRouter>
);
expect(container).toMatchSnapshot();
expect(screen.getByText(pageInfo)).toBeInTheDocument();
const goBackBtn = screen.getByRole("button");
userEvent.click(goBackBtn);
await waitFor(() => {
expect(navigate).toBeCalled();
});
});
});

我尝试spyOn的useNavigate钩从react router V6，但当我运行的代码我得到TypeError: Cannot redefine property: useNavigate

Answer 1

模拟它应该可以工作:

jest.mock('react-router-dom', () => ({
...(jest.requireActual('react-router-dom')), // since you still want to use the actual MemoryRouter
useNavigate: () => useNavigateMock,
}))