如何监视和测试react-router-dom包的“useNavigate”方法是否被调用

Question

我试图在react-router-dom包的“useNavigate”方法上添加间谍，以测试它是否在导航上被调用。但我收到此错误“TypeError：无法重新定义属性：useNavigate”

app.js

const navigate = useNavigate();
.......
return (
 <a href="" data-testid={recipe.id} onClick={() => {
    console.log("called");
    navigate(`/recipes/edit/${recipe.id}`, {state: {recipe: recipe}});
    }}>
    Edit
 </a>

app.test.js

import * as ReactRouterDom from "react-router-dom";

const useNavigateSpy = jest.spyOn(ReactRouterDom, "useNavigate");

it("clicking on edit takes to edit view", async() => {
    useNavigateSpy.mockImplementation(() => jest.fn());
    
    await act(async () =>
      render(<BrowserRouter>
        <List />
      </BrowserRouter>));

      const user = userEvent.setup();
      await user.click(screen.getByTestId("R1"));

      expect(useNavigateSpy).toHaveBeenCalled();

  });

我可以看到“被调用”正在被打印，所以单击正在工作，但是我无法测试导航是否被调用。

任何指导都会非常有用。

Answer 1

您可以在不监视 useNavigate 的情况下通过模拟它来做到这一点。以下是如何做到这一点（使用 TypeScript 的示例）：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter, useNavigate } from 'react-router-dom';

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useNavigate: jest.fn(),
}));

const mockedUseNavigate = useNavigate as jest.MockedFunction<typeof useNavigate>;

describe('List', () => {
  test("clicking on edit takes to edit view", async() => {
      const navigate = jest.fn().mockImplementation((to: string) => console.log(to));

      mockedUseNavigate.mockImplementationOnce(() => navigate);

      render(<BrowserRouter>
        <List />
      </BrowserRouter>);

      await userEvent.click(screen.getByTestId("R1"));

      expect(navigate).toHaveBeenCalledTimes(1);
      expect(navigate).toHaveBeenCalledWith('someTestPath');

  });
});

我用来做出这个回应的资源： https://stackoverflow.com/a/66950016