如何监视和测试是否“ Usenavigate”是否方法称为或不称为React-Router-dom软件包

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();

  });

我可以看到“呼叫”正在打印，所以单击是有效的，但是是的，我无法测试是否navegate是被打电话。

任何指导都将真正有用。

Answer 1

您可以在不监视Usenavigate的情况下做到这一点，而是通过嘲笑它。这是您可以做到的（例如用打字稿）：

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