未捕获的错误：useNavigate() 只能在赛普拉斯单元测试用例中的 <Router> 组件的上下文中使用答案

【问题标题】：Uncaught Error: useNavigate() may be used only in the context of a <Router> component in cypress unit testcases未捕获的错误：useNavigate() 只能在赛普拉斯单元测试用例中的 <Router> 组件的上下文中使用
【发布时间】：2021-12-25 13:00:44
【问题描述】：

我正在尝试为与柏树反应的组件编写“单元测试”。
关注链接cypress docs on component testing

当我为一个组件编写测试用例并尝试使用“npx cypress open-ct”运行时
然后得到上述错误（问题标题）...
注意：登录时实现 oAuth2 !!!
我的 index.spec.js 文件是

import * as React from 'react';
import { mount } from '@cypress/react';
import User from './index';

describe('User component', ()=>{
    before('loginApi', ()=>{
        cy.login();  
        //login() has login-logic and setting localStorage (placed in "commands.js" file)  
        //even if cy.login() is commented, error is same (so guessing this not reason of error)
    })
    it('Mount user', () => {            
        mount(<User />); 
    });
})

观察1：在赛普拉斯浏览器上，TEST BODY“mount”值为
观察 2：[网络选项卡] 用户组件进行 api-call 并以 401 失败
（#已知令牌问题，甚至使用正确的令牌失败）

查找附加的错误屏幕截图。

【问题讨论】：

标签： reactjs unit-testing cypress cypress-component-test-runner

【解决方案1】：

经过一番折腾，我发现...

mount 基本上是这种情况，如果你没有添加在相应的 index.jsx 文件中使用的所有依赖项。

useNavigation() 将仅在上下文中使用 结果在这种情况下，如果您缺少 BrowserRouter 依赖项，则您在路由页面中使用的方式（任一）
import {BrowserRouter as Router} from 'react-router-dom';import {BrowserRouter} from 'react-router-dom';

import * as React from 'react';  
import { mount } from '@cypress/react';  
import User from './index';  
import {BrowserRouter as Router} from 'react-router-dom';   

describe('User component', ()=>{
   it('Mount user', () => {   
      const onSubmit= cy.stub();  
      //or any other function which is probably used by ur component         
      mount(
        <Router>      
           <User onSumbit={onSubmit}/>
        </Router>
      ); 
   });
});

【讨论】：