反应笑话模拟 useNavigate()

Question

"react-router-dom": "^6.0.0-alpha.5",

我几乎尝试了一切。

我只是想从钩子上模拟这个navigate()调用useNavigate()。就是这样。简单的。没有任何作用。

不，我不想使用Link。useNavigate 也在其他地方以编程方式使用，我也想模拟它们

"react-router-dom": "^6.0.0-alpha.5",

我已经尝试过这些：

jest.mock('react-router-dom', () => {
    // Require the original module to not be mocked...
    const originalModule = jest.requireActual('react-router-dom');

    return {
        __esModule: true,
        ...originalModule,
        // add your noops here
        useNavigate: jest.fn(() => 'bar')
    };
});

import * as ReactRouterDom from "react-router-dom";
...
// cannot redefine property
          Object.defineProperty(ReactRouterDom, 'useNavigate', {
              configurable: true,
              value: jest.fn(() => 'bar')
          });

// doesnt work
          jest.mock('react-router-dom', () => ({
              useNavigate: jest.fn(() => jest.fn),
          }))

// doesnt work
jest.spyOn(ReactRouterDom, 'useNavigate', 'get').mockReturnValue(jest.fn(() => jest.fn));

// doesnt work
jest.spyOn(ReactRouterDom, 'useNavigate').mockReturnValue(jest.fn(() => jest.fn));

import React from 'react'
import { useNavigate } from "react-router-dom"

export const Detail = () => {
    const navigate = useNavigate();
    return (
        <span onClick={() => navigate('/some/specific/route')}>
            some Text
        </span>
    )
}

所有这些要么表明"Cannot redefine Property 'useNavigate'"，要么表明 useNavigate() may be used only in the context of a <Router> component.

说真的，任何其他导入模拟都可以正常工作。

我究竟做错了什么？

我的最小重建项目：https://github.com/zacharytyhacz/useNavigateBug

Answer 1

我也有类似的担忧，该问题已通过反应路由器解决

我建议您按原样更改模拟：

// pay attention to write it at the top level of your file
const mockedUsedNavigate = jest.fn();

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


// your describe/it/test blocks go down there

Answer 2

navigate()以下是我在组件测试中模拟和断言调用的方式：

import * as router from 'react-router'

const navigate = jest.fn()

beforeEach(() => {
  jest.spyOn(router, 'useNavigate').mockImplementation(() => navigate)
})

it('...', () => {
  ...
  expect(navigate).toHaveBeenCalledWith('/path')
})

Answer 3

useNavigate如果您从以下位置更改导入，您应该能够正常监视：

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

到

import { useNavigate } from "react-router"