[英]Error: useHref() may be used only in the context of a <Router> component when testing
I have a React project that I am trying to add tests to with React Testing Library.我有一个 React 项目,我正在尝试使用 React 测试库添加测试。 I keep getting this error when I run my tests: Error: useHref() may be used only in the context of a <Router> component.
运行测试时,我不断收到此错误: Error: useHref() may be used only in the context of a <Router> component.
I did find a couple questions on here with that error and I tried the solutions with no success.我确实在这里发现了几个关于该错误的问题,但我尝试了解决方案但没有成功。 I know it has something to do with React Router Dom.我知道这与 React Router Dom 有关。 Maybe someone can spot what I am doing wrong.也许有人可以发现我做错了什么。
Here is my App.js:这是我的 App.js:
import React, { useState } from 'react';
import Providers from './context/GlobalContextProviders';
import {
BrowserRouter as Router,
Route,
Routes
} from 'react-router-dom';
import './styles/App.scss';
import { Header } from './components/containers';
import Main from './components/views/Main';
import UsersCenter from './components/views/UsersCenter';
import IngredientsCenter from './components/views/IngredientsCenter';
import NavMenu from './components/containers/NavMenu';
import CSFCenter from './components/views/CSFCenter';
const App = () => {
const [showUserSettings, setShowUserSettings] = useState(false);
const [showNavMenu, setShowNavMenu] = useState(false);
return (
<Providers>
<div className={'App'}>
<Router>
<div className={'container-fluid g-0'}>
<Header
title={'Quotes System IngredientsCenter'}
showUserSettings={showUserSettings}
setShowUserSettings={setShowUserSettings}
showNavMenu={showNavMenu}
setShowNavMenu={setShowNavMenu}
/>
{showNavMenu && (
<NavMenu setShowNavMenu={setShowNavMenu} />
)}
<Routes>
<Route path={'/'} element={<Main />} />
<Route path={'/users'} element={<UsersCenter />} />
<Route
path={'/ingredients'}
element={<IngredientsCenter />}
/>
<Route path={'/CSFCenter'} element={<CSFCenter />} />
</Routes>
</div>
</Router>
</div>
</Providers>
);
};
export default App;
And then my test:然后我的测试:
import {
render,
screen,
within,
fireEvent,
waitFor
} from '@testing-library/react';
import ReactModal from 'react-modal';
import IngredientsCenter from '../views/IngredientsCenter';
test('The ingredients table exists on the screen', async () => {
render(
// ReactModal.setAppElement(document.createElement('div')),
<IngredientsCenter />
);
const ingredientsTable = screen.getByRole('ingredients-table');
await waitFor(() => {
expect(ingredientsTable).toBeTruthy();
});
});
When a component requires context of some sort (eg with Redux's connect()
ed components, or here with react-router
), instead of just rendering the component itself,当组件需要某种上下文时(例如,使用 Redux 的connect()
ed 组件,或者这里使用react-router
),而不是仅仅渲染组件本身,
render(<IngredientsCenter />);
you'll need to wrap it in the provider(s) it requires:您需要将其包装在它需要的提供程序中:
render(<Router><IngredientsCenter /></Router>);
If you find yourself needing to do that a lot, you can of course write a wrapper:如果您发现自己需要做很多事情,您当然可以编写一个包装器:
function renderWithProviders(el) {
render(<Providers><Router>{el}</Router></Providers>);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.