使用Cypress测试React项目Auth0登录时遇Auth0Provider包裹错误

问题描述 #

React项目集成Auth0认证后，npm start启动时Gmail账号登录功能正常，但Cypress组件测试中直接挂载<App/>并点击登录时，触发以下错误：

(uncaught exception)Error: You forgot to wrap your component in

相关代码 #

文件：cypress/component/login.cy.jsx

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

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

文件：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;

文件：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}
      clientId={clientId} 
      redirectUri={window.location.origin}
      cacheLocation={window.Cypress ? "localstorage" : "memory"}
    >
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Auth0Provider>
  </React.StrictMode>
);

reportWebVitals();

原因分析 #

• 生产环境中，<App/>在index.jsx里被<Auth0Provider>包裹，所有组件都能通过React上下文访问Auth0的认证服务。
• Cypress组件测试时，直接挂载的<App/>没有被<Auth0Provider>包裹，导致登录相关组件无法获取Auth0上下文，触发报错。

解决方法 #

修改login.cy.jsx，在挂载<App/>时用<Auth0Provider>包裹，并配置测试所需的Auth0参数：

import App from "../../src/App";
import { Auth0Provider } from '@auth0/auth0-react';

describe('login.cy.jsx', () => {
  it('playground', () => {
    cy.viewport(1200,750)
    cy.mount(
      <Auth0Provider 
        domain={Cypress.env('REACT_APP_AUTH0_DOMAIN')}
        clientId={Cypress.env('REACT_APP_AUTH0_CLIENT_ID')}
        redirectUri={window.location.origin}
        cacheLocation="localstorage"
      >
        <App />
      </Auth0Provider>
    )    
  })
})

额外说明 #

1. 环境变量配置：需要在Cypress配置文件（如cypress.config.js）中添加Auth0的环境变量，确保测试能读取到REACT_APP_AUTH0_DOMAIN和REACT_APP_AUTH0_CLIENT_ID。
2. 路由避免重复：<App/>内部已经包含<BrowserRouter>，测试中无需再次包裹，防止路由上下文冲突。

内容的提问来源于stack exchange，提问作者alex