我有一個 React 專案，我正在嘗試使用 React 測驗庫添加測驗。運行測驗時，我不斷收到此錯誤：Error: useHref() may be used only in the context of a <Router> component. 我確實在這里發現了幾個與該錯誤有關的問題，但我嘗試了解決方案但沒有成功。我知道這與 React Router Dom 有關。也許有人可以發現我做錯了什么。
這是我的 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;
然后我的測驗：
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();
});
});
uj5u.com熱心網友回復：
當一個組件需要某種背景關系時（例如使用 Redux 的connect()ed 組件，或者這里使用react-router），而不是僅僅渲染組件本身，
render(<IngredientsCenter />);
您需要將其包裝在它需要的提供程式中：
render(<Router><IngredientsCenter /></Router>);
如果您發現自己需要做很多事情，您當然可以撰寫一個包裝器：
function renderWithProviders(el) {
render(<Providers><Router>{el}</Router></Providers>);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/414956.html
標籤：