如何編寫使用 useAuthContext 的玩笑測試

Question

嗨，我不熟悉反應，但我想編寫使用 useAuthContext 的開玩笑單元測試，它被廣泛用於我的隊友制作的模塊中。 但是每次我嘗試渲染任何使用 useAuthContext.js 的東西時，我都無法渲染，它會拋出這個錯誤

我想知道我是否通過了這個上下文或者我如何為渲染編寫測試？ 我嘗試了幾種解決方案，但似乎沒有一個效果很好。 任何幫助表示贊賞，謝謝！

應用程序測試.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();
    });

應用程序.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;

使用AuthContext.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

根據https://reactjs.org/docs/context.html#contextprovider你需要在應用程序上包裝和搜索AuthContextProvider 。 它會類似於下面只需要填寫值。

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