反应开玩笑模拟 useNavigate()

Posted 2023-02-22

【中文标题】反应开玩笑模拟 useNavigate()

【英文标题】：react jest mock useNavigate()

【发布时间】：2021-05-22 20:11:06

【问题描述】：

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

我几乎尝试了所有方法。

我只想模拟来自useNavigate() 钩子的navigate() 调用。而已。简单的。没有任何效果。

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

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

我试过这些：

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

// doesnt work
const mockedUsedNavigate = jest.fn();

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

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

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

我做错了什么？

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

【参考方案1】：

我有一个类似的问题，this issue from react router 解决了

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

// 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

【讨论】：

它抛出了什么错误？你能指出你的示例 repo 或显示你的测试文件吗？

它在原始帖子useNavigate() may be used only in the context of a <Router> component.中说同样的错误

介意粘贴您的测试文件吗？

这是我的最小项目：github.com/zacharytyhacz/useNavigateBug

你的 mokedUseNavigate 和 jest mock(github.com/zacharytyhacz/useNavigateBug/blob/…) 应该在文件的顶层，而不是在 "test"、"it" 或 "describe" 内：参考：github.com/ReactTraining/react-router/issues/7811