npm 测试：useNavigate() 只能在<router>成分</router>

Question

I have a very simple test written, which only checks whether some text is displayed on screen. But it gives an error saying useNavigate() may be used only in the context of a <Router> component. , which is located in LoginButton.js .

useNavigate() may be used only in the context of a <Router> component.

  10 |     const service = new AccountService();
  11 |     const value = useContext(userContext);
> 12 |     const navigate = useNavigate();
     |                      ^
  13 |
  14 |     function handleLogin(user){
  15 |         value.userLogin(user);

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

App.js

export default function App() {
  const service = new AccountService();
  const [stateUser, setStateUser] = useState(null);
  const navigate = useNavigate();
  let user;

  // some extra code...      
  
  return (
    <div className="App">
      <userContext.Provider value={value}>
        <Navbar/>
        <Routes>
          <Route path='/' element={<Posts/>}/>
          <Route path='/login' element={<Login/>}/>
          <Route path='/posts' element={<Posts/>}/>
        </Routes>
      </userContext.Provider>
    </div>
  );
}

Login.js

export default function Login() {
  const value = useContext(userContext);

  return (
    <>
      <div className='w-full h-[80vh] flex justify-center items-center'>
        <GoogleOAuthProvider clientId={process.env.REACT_APP_CLIENT_ID}>
          <LoginButton value={value}/>
        </GoogleOAuthProvider>
      </div>
      
    </> 
  )
}

LoginButton.js

export const LoginButton = () => {
    const service = new AccountService();
    const value = useContext(userContext);
    const navigate = useNavigate();

    function handleLogin(user){
        value.userLogin(user);
        service.setUserSession(JSON.stringify(user));
        navigate('/posts');
    }

    const googleLogin = useGoogleLogin({
        onSuccess: async (tokenResponse) => {
            console.log(tokenResponse);
            const userInfo = await axios.get(
                "https://www.googleapis.com/oauth2/v3/userinfo",
                { headers: { Authorization: 'Bearer ' + tokenResponse.access_token } }
            );
            handleLogin(userInfo.data);
        },
        onError: (errorResponse) => console.log(errorResponse),
    });
  
    return <GoogleButton onClick={googleLogin}>Login</GoogleButton>;
};

The test:

import { render, screen } from '@testing-library/react';
import App from './App';
import Login from './Pages/Login';

test('renders login in nav', () => {
  render(<Login />);
  const linkElement = screen.getByText(/Login/i);
  expect(linkElement).toBeInTheDocument();
});

Answer 1

in your test wrap the button component inside the Router component. something like the code below

import { Router } from 'react-router-dom';

 <Router initialEntries={['/']}>
        <button>
          Click
        </Button>
      </Router>

Answer 2

I had to wrap the component in a `BrowserRouter` inside the test.


import { render, screen } from '@testing-library/react';
import { BrowserRouter, Router } from 'react-router-dom';
import App from './App';
import Login from './Pages/Login';

test('renders login in nav', () => {
  render(<BrowserRouter><Login/></BrowserRouter>);
  const linkElement = screen.getByText(/Login/i);
  expect(linkElement).toBeInTheDocument();
});