如何编写使用 useAuthContext 的玩笑测试

Question

Hi I'm not familiar with react but I want to write jest unit tests that use useAuthContext, it was widely used in modules made by my teammates. But each time I tried to render anything that uses useAuthContext.js I cannot render and it throwing me error of this error

I wonder if there is anyway that I pass this context or how can i write tests for the rendering? I tried several solutions but none seem to work well. Any help is appreciated, thanks!

App.test.js

import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./App";
import ReactDOM from 'react-dom';
import ShallowRenderer from 'react-shallow-renderer';

let realUseContext;
let useContextMock;
// Setup mock
beforeEach(() => {
    realUseContext = React.useContext;
    useContextMock = React.useContext = jest.fn();
});
// Cleanup mock
afterEach(() => {
    React.useContext = realUseContext;
});



test("mock hook", () => {

    const element = new ShallowRenderer().render(
        <App />
    );

});

test("render without failure", () => {
    const div = document.createElement("div");
    ReactDOM.render(<App />, div);
});

test("renders the nav bar", () => {
    render(<App />);
    const navbar = screen.getByTestId("navbar");
    expect(navbar).toBeInTheDocument();
    });

App.js

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { useAuthContext } from './hooks/useAuthContext'

// pages & components
import Home from './pages/Home'
import Login from './pages/Login'
import Signup from './pages/Signup'
import LostPassword from './pages/LostPassword'
import WaitTimes from './pages/WaitTimes'
import Navbar from './components/Navbar'

function App() {
  const { user } = useAuthContext()

  return (
    
    <div className="App">

      <BrowserRouter>
        <Navbar />

        <div className="pages">
          <Routes>
            <Route 
              path="/" 
              element={user ? <Home /> : <Navigate to="/login" />} 
            />
            
            <Route 
              path="/login" 
              element={!user ? <Login /> : <Navigate to="/" />} 
            />
            <Route 
              path="/signup" 
              element={!user ? <Signup /> : <Navigate to="/" />} 
            />
            <Route 
              path="/lost" 
              element={!user ? <LostPassword /> : <Navigate to="/" />} 
            />
            
            <Route 
              path="/wait" 
              element={!user ? <WaitTimes /> : <Navigate to="/" />} 
            />
          </Routes>

        </div>
      </BrowserRouter>

    </div>
  );
}

export default App;

useAuthContext.js

import { AuthContext } from "../context/AuthContext"
import { useContext } from "react"

export const useAuthContext = () => {
  const context = useContext(AuthContext)

  if(!context) {
    throw Error('useAuthContext must be used inside an AuthContextProvider')
  }

  return context
}

Answer 1

According to https://reactjs.org/docs/context.html#contextprovider you need to wrap and search on AuthContextProvider on the app. It will be similar to the below just need to fill the value.

render(
  <AuthContextProvider value={}>
    <App />
  </AuthContextProvider>
);