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

Posted 2023-02-16

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

【英文标题】：Uncaught Error: useNavigate() may be used only in the context of a <Router> component in cypress unit testcases

【发布时间】：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 失败 （#已知令牌问题，甚至使用正确的令牌失败）

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

【参考方案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>
      ); 
   );
);