React js using Cypress to test Login Auth0

Question

I want to test login auth0 with this code:

file cypress/component/login.cy.jsx

import App from "../../src/App";

describe('login.cy.jsx', () => {
  it('playground', () => {
    cy.viewport(1200,750)
    cy.mount(<App />)    

  })
})

my src/app.jsx

import { BrowserRouter ,Routes, Route } from 'react-router-dom'
import Header from './layout/header'; 
import Profile from './pages/profile';
import Home from './pages/home';
import Dashboard from './pages/dashboard';
import Contact from './pages/contact';
import About from './pages/about';
import Settings from './pages/settings';

function App() {

  return (    
    <BrowserRouter >
      <Header /> 
      <Routes>  
        <Route path='/' Component={Home} />
        <Route path='/home' Component={Home} />
        <Route path='/dashboard' Component={Dashboard} />
        <Route path='profile' Component={Profile} />
        <Route path='/contact' Component={Contact} />
        <Route path='/about' Component={About} />
        <Route path='/settings' Component={Settings} /> 
      </Routes>
    </BrowserRouter >
  );
}

export default App;

my file src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Auth0Provider } from '@auth0/auth0-react'
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID

root.render(
  <React.StrictMode>
    <Auth0Provider 
      domain={domain} c
      clientId={clientId} 
      redirectUri={window.location.origin}
      cacheLocation={window.Cypress ? "localstorage" : "memory"}
    >
      <BrowserRouter>
        <App />
      </BrowserRouter>      
    </Auth0Provider>
  </React.StrictMode>
);

reportWebVitals();

so, when cypress is running I click on login I get this issue:

(uncaught exception)Error: You forgot to wrap your component in <Auth0Provider>.

what's wrong???

first of all I run this project with npm start, it's work fine, then I just tested de login with auth0, I logged using my account gmail, and work fine, so why it fail using cypress?

Answer 1

When you use cy.mount() in a component test, you would need to reproduce everything surrounding <App/> that you already have in src/index.js.

Otherwise, as the error message says there is no <Auth0Provider> in your test.

Something like

cy.mount(`
  <React.StrictMode>
    <Auth0Provider 
      domain={domain} c
      clientId={clientId} 
      redirectUri={window.location.origin}
      cacheLocation={window.Cypress ? "localstorage" : "memory"}
    >
      <BrowserRouter>
        <App />
      </BrowserRouter>      
    </Auth0Provider>
  </React.StrictMode>
`)

In the first instance, I would switch to e2e testing as you will not have that problem, and you are actually testing the whole app, not just a single component.