未捕获的错误：useNavigate() 只能用于<Router> cypress 单元测试用例中的组件

Question

I am trying to write "unit-test" for components in react with cypress.
Followed the link cypress docs on component testing

when I wrote testcase for a component and tried to run with "npx cypress open-ct"
then getting the above error (question title)...
Note: for login oAuth2 is implemented !!!
My index.spec.js file is

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

Observation1: on cypress browser under TEST BODY "mount" value is <Unknown.../>
Observation2: [Network tab] User component makes api-call and failing with 401
(#known token issue, even fails with right token)

Find attached error screenshot.

Answer 1

After some beating around I found out...

1. mount <Unknown... /> basically results in the case, if you have not added all the dependency which are used in respective index.jsx file.

2. useNavigation() will be used only in context results in the case, if you are missing BrowserRouter dependency the way you have used in your routing page (either one)
   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> ); }); });