![](/img/trans.png)
[英]Error: useHref() may be used only in the context of a <Router> component when testing
[英]How to fix Error: useHref() may be used only in the context of a <Router> component
我該如何解決這個問題。 我只是想創建一個測試以確保該組件呈現,但由於某種原因,即使該組件已經在<Router>
內部,也會出現此問題。
我在這里閱讀了其他類似的問題,答案都說將組件放在<Router/>
中,但這對我來說似乎不是問題。 請告訴我我錯過了什么?
** 我的 app.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 />);
});
});
SignUpView
在您的測試中缺少路由上下文。 導入 memory 路由器並包裝被測組件,使其具有提供的路由上下文。
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>
);
});
});
對於測試,您可以提供容器包裝器
import { MemoryRouter } from 'react-router-dom';
test('Should render sigUp view component', () => {
render(<SignUpView />, {wrapper: MemoryRouter});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.