reactjs - 反应开玩笑模拟 useNavigate()
问题描述
"react-router-dom": "^6.0.0-alpha.5",
我几乎尝试了一切。
我只是想从钩子中模拟这个navigate()
调用。useNavigate()
就是这样。简单的。没有任何工作。
不,我不想使用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.
说真的,任何其他导入模拟都可以正常工作。
我究竟做错了什么?
解决方案
我有一个类似的问题,从反应路由器解决了这个问题
我建议您按原样更改模拟:
// 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
推荐阅读
- sql-server - 如何使用 Excel VBA 从 Excel 更新 MSSQL
- java - 将一个模型映射到服务层中的另一个模型
- css - 设置没有动画的css rotateY
- docker - Docker Service Worker 未从 swarm voteapp 教程中的堆栈部署开始
- tfs - 使用删除存储过程减少 TFS 数据库大小是否安全?
- python - scipy.optimize.basinhopping 和迭代总数
- php - 使用 PhP 在 Excel 中为 MongoDB 中的 Null 字段打印空格
- javascript - 关于 `form[name]` 功能的浏览器支持列表
- shoutem - 使用shoutem builder创建带有扩展名的登录页面
- php - 如何捕获“所有” php 警告?