如何修复错误：useHref() 只能在 <Router> 组件的上下文中使用

Question

我该如何解决这个问题。我只是想创建一个测试来确保该组件呈现，但由于某种原因，即使该组件已经在内部，仍然会出现此问题<Router>。

我在这里读过其他类似的问题，答案都说将组件放入<Router/>，但这对我来说似乎不是问题。请告诉我我错过了什么？

** 我的应用程序.tsx**

import './App.scss';
import { AuthContexProvider } from './Utils/Contexs/AuthContext';
import { Routes, Route } from 'react-router-dom';
import { LogoLarge } from './Components/Logo/Logo';
import { SignInView } from './Views/SignInView';
import { ErrorPage } from './Views/ErrorView';
import { SignUpView } from './Views/SignUpView';
import { SwipeView } from './Views/SwipeView';
import { ResetPasswordView } from './Views/ResetPasswordView';
import { CreateProfileView } from './Views/CreateProfileView';
import { PrivateRoute } from './Utils/PrivateRoute';
import { ProfileView } from './Views/ProfileView';
import { SwipeContexProvider } from './Utils/Contexs/SwipeContex';
import { MatchesView } from './Views/MatchesView';
import { MessageView } from './Views/MessageView';

function App() {
  return (
    <div className='app'>
      <AuthContexProvider>
        <SwipeContexProvider>
          <header className='appWrapper'>
            <Routes>
              <Route path='/' element={<PrivateRoute component={SwipeView} />} />
              <Route
                path='/signin'
                element={
                  <div className='signInViewWrapper'>
                    <nav>
                      <LogoLarge />
                    </nav>
                    <SignInView />
                  </div>
                }
              />
              <Route
                path='/signup'
                element={
                  <div className='signUpViewWrapper'>
                    <nav>
                      <LogoLarge />
                    </nav>
                    <SignUpView />
                  </div>
                }
              />
              <Route
                path='/resetpassword'
                element={
                  <div className='resetPasswordViewWrapper'>
                    <nav>
                      <LogoLarge />
                    </nav>
                    <ResetPasswordView />
                  </div>
                }
              />
              <Route path='/createprofile' element={<PrivateRoute component={CreateProfileView} />} />
              <Route path='/profile' element={<PrivateRoute component={ProfileView} />} />
              <Route path='/matches' element={<PrivateRoute component={MatchesView} />} />
              <Route path='/matches/:id' element={<PrivateRoute component={MessageView} />} />
              <Route
                path='*'
                element={
                  <div className='appContent'>
                    <ErrorPage />
                  </div>
                }
              />
            </Routes>
          </header>
        </SwipeContexProvider>
      </AuthContexProvider>
    </div>
  );
}

export default App;

注册查看

import { Typography } from '@mui/material';
import { Link } from 'react-router-dom';
import { SignUpForm } from '../Components/Forms/SignUpForm';

//SASS
// import '../Styles/Scss/SignUpView.scss';
import { StyledFormsWrapper } from '../Styles/StyledComponents/StyledFormsWrapper';

export const SignUpView = () => {
  return (
    <StyledFormsWrapper data-testid='todo-1' className='signUpWrapper'>
      <Typography className='actionTitle' variant='h5' gutterBottom component='div' sx={{ fontWeight: 600 }}>
        Create account
      </Typography>
      <Typography variant='subtitle1' gutterBottom component='div'>
        Already have an account? <Link to={'/signin'}>Sign in</Link>
      </Typography>
      <SignUpForm />
    </StyledFormsWrapper>
  );
};

SignUpView.test.js

import React from 'react';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import { SignUpView } from '../../Views/SignUpView';

describe('my function or component', () => {
  test('Should render sigUp view component', () => {
    render(<SignUpView />);
  });
});

Answer 1

对于测试，您可以提供容器包装

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

test('Should render sigUp view component', () => {
  render(<SignUpView />, {wrapper: MemoryRouter});
});

这个链接有一些有用的例子

Answer 2

SignUpView您的测试中缺少路由上下文。导入内存路由器并包装被测组件，使其具有提供的路由上下文。

import React from 'react';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import { MemoryRouter as Router } from 'react-router-dom';
import { SignUpView } from '../../Views/SignUpView';

describe('my function or component', () => {
  test('Should render sigUp view component', () => {
    render(
      <Router>
        <SignUpView />
      </Router>
    );
  });
});

事实上，这种需要提供上下文的模式非常常见，以至于 RTL 有一个wrapper选项可以用来提供一个包装器组件，该组件提供组件使用的所有上下文，即路由、主题、redux、区域设置翻译等......

例子：

const RouterWrapper = ({ children }) => (
  <MemoryRouter>
    {children}
  </MemoryRouter>
);

...

import { RouterWrapper } from '../path/to/RouterWrapper';

describe('my function or component', () => {
  test('Should render sigUp view component', () => {
    render(<SignUpView />, { wrapper: RouterWrapper });
  });
});

有关更多详细信息，请参阅自定义渲染。