![](/img/trans.png)
[英](react router v6) "Error: useNavigate() may be used only in the context of a <Router> component" error in hoc component
[英]React Router V6 - useNavigate() may be used only in the context of a <Router> component
我已經安裝了 react-router-domV6。 當我使用 Jest-Enzyme 運行我的非常基本的測試時,我遇到了上述錯誤:
expect(shallow(<CustomerListTable customers={mockCustomers} />).length).toEqual(1);
我已經遇到過這里提到的類似問題,但我已經在做提供的答案。 甚至嘗試import { BrowserRouter as Router } from "react-router-dom";
. 我在這里想念什么?
index.js
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { StrictMode } from "react";
import { BrowserRouter } from "react-router-dom";
...
ReactDOM.render(
<StrictMode>
...
<BrowserRouter>
<AuthProvider>
<App />
</AuthProvider>
</BrowserRouter>
...
</StrictMode>,
document.getElementById("root")
);
應用程序.js
import React from "react";
import { useRoutes } from "react-router-dom";
import Routing from "./routes";
import useAuth from "./hooks/useAuth";
import { CreateCustomTheme } from "./theme";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import useSettings from "./hooks/useSettings";
import useScrollReset from "./hooks/useScrollReset";
import SplashScreen from "./components/splashScreen/SplashScreen";
const App = () => {
const content = useRoutes(Routing());
const { settings } = useSettings();
const auth = useAuth();
useScrollReset();
const theme = CreateCustomTheme({
direction: settings.direction,
responsiveFontSizes: settings.responsiveFontSizes,
roundedCorners: settings.roundedCorners,
theme: settings.theme,
});
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{auth.isInitialized ? content : <SplashScreen />}
</ThemeProvider>
);
};
export default App;
您正在隔離測試的CustomerListTable
組件似乎無法訪問它所期望的路由上下文,就像它在應用程序中正常呈現時一樣。 使用提供組件正在訪問的特定 React Context 值的提供程序(redux、主題/樣式、本地化、路由等)測試組件時,需要包裝組件是完全正常的,通常通過 React 掛鈎。
對於單元測試,您應該將組件與它期望的提供者一起包裝。
expect(shallow(
<BrowserRouter>
<CustomerListTable customers={mockCustomers} />
</BrowserRouter>
).length).toEqual(1);
自從我使用 Enzyme 已經很長時間了,所以我不確定shallow
渲染是否仍然有效,但如果它不起作用,則切換到全mount
測試渲染器。
要解決此問題,您可以在編寫測試用例的文件的所有導入之前直接模擬您的 useNavigate() :-
const mockedUsedNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockedUsedNavigate,
}));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.