Reactjs react jest mock useNavigate（）

我几乎什么都试过了

我只想模拟来自

useNavigate（）

钩子的

navigate（）

调用。就这样。简单。没用

不，我不想使用

链接

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

从“React”导入React
从“react router dom”导入{useNavigate}
导出常量详细信息=（）=>{
const-navigate=useNavigate（）；
返回(
导航（'/some/specific/route'）}>
一些文本
)
}

我试过这些：

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

//不起作用
const mockedUsedNavigate=jest.fn（）；
jest.mock（'react-router-dom'，（）=>({
…jest.requireActual（'react-router-dom'）与任何，
useNavigate:（）=>mockedUsedNavigate，
}));

所有这些都显示

“无法重新定义属性'useNavigate'”

，或者

useNavigate（）只能在组件的上下文中使用。

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

我做错了什么

---

我的最小重新创建项目：

我有一个类似的问题，这个问题已经解决了

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

//注意在文件的顶层编写
const mockedUsedNavigate=jest.fn（）；
jest.mock（'react-router-dom'，（）=>({
…jest.requireActual（'react-router-dom'）与任何，
useNavigate:（）=>mockedUsedNavigate，
}));
//你的描述/它/测试块在那里

尝试了这个，但无效：/it抛出了什么错误？您能指出您的示例repo或显示您的测试文件吗？它说原始post中的相同错误

useNavigate（）只能用于组件的上下文。

介意粘贴您的测试文件吗？您的mokedUseNavigate和jest mock（）应该位于文件的顶层，而不是在“test”、“it”或“descripe”中：请参阅以下参考：

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