时间戳

首页 > 解决方案 > 未捕获的错误：useNavigate() 只能在 a 的上下文中使用cypress 单元测试用例中的组件

reactjs - 未捕获的错误：useNavigate() 只能在 a 的上下文中使用cypress 单元测试用例中的组件

问题描述

我正在尝试为与柏树反应的组件编写“单元测试”。
遵循关于组件测试的链接 cypress 文档

当我为一个组件编写测试用例并尝试使用“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”值是 <Unknown.../>
观察 2：[网络选项卡] 用户组件进行 api-call 并以 401 失败
（#known 令牌问题，甚至因正确的令牌而失败）

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

标签： reactjsunit-testingcypresscypress-component-test-runner

解决方案

打了几圈后才发现...

  1. mount <Unknown... />基本上会导致这种情况，如果您没有添加相应 index.jsx 文件中使用的所有依赖项。

  2. 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>
      ); 
   });
});

推荐阅读