React Router V6 - useNavigate() 只能在 <Router> 组件的上下文中使用答案

【问题标题】：React Router V6 - useNavigate() may be used only in the context of a <Router> componentReact Router V6 - useNavigate() 只能在 <Router> 组件的上下文中使用
【发布时间】：2021-12-29 22:31:16
【问题描述】：

我已经安装了 react-router-domV6。当我使用 Jest-Enzyme 运行我的非常基本的测试时，我遇到了上述错误：

expect(shallow(<CustomerListTable customers={mockCustomers} />).length).toEqual(1);

我已经遇到过这个similar issue mentioned here，但我已经在做提供的答案了。甚至尝试过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")
);

App.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;

【问题讨论】：

标签： reactjs jestjs react-router react-router-dom enzyme

【解决方案1】：

您正在单独测试的CustomerListTable 组件似乎无法访问它所期望的路由上下文，就像它在应用程序中正常呈现时一样。使用提供特定 React Context 值的提供程序（redux、主题/样式、本地化、路由等）测试组件时，需要包装组件是完全正常的组件正在访问，通常通过 React 挂钩。

对于单元测试，您应该使用它所期望的提供者来包装组件。

expect(shallow(
  <BrowserRouter>
    <CustomerListTable customers={mockCustomers} />
  </BrowserRouter>
).length).toEqual(1);

我已经很久没有使用 Enzyme 了，所以我不确定 shallow 渲染器是否仍然有效，但如果它不起作用，则切换到完整的 mount 测试渲染器。

【讨论】：

【解决方案2】：

要解决此问题，您可以像这样在您编写测试用例的文件的所有导入之前直接模拟您的 useNavigate()：-

const mockedUsedNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockedUsedNavigate,
}));

【讨论】：