时间戳

首页 > 解决方案 > 在 v6 React 路由器中测试页面时“无法读取未定义的属性（读取'路径名'）”

reactjs - 在 v6 React 路由器中测试页面时“无法读取未定义的属性（读取'路径名'）”

问题描述

当使用 s 测试组件时<Link>，例如在我对在 react-router 的路由中进行基于路由的测试的推荐方法的回答中，我经常使用以下模式来访问当前location以进行测试：

const renderInRouter = () => {
  const history = createMemoryHistory();
  const wrapper = render(
    <Router history={history}>
      <MyPage />
    </Router>
  );
  return { ...wrapper, history };
}

这在 v5.3 之前运行良好，但在升级到 v6 后我得到：

 FAIL  ./demo.test.js
  ✕ works (205 ms)

  ● works

    TypeError: Cannot read properties of undefined (reading 'pathname')

      at Router (../packages/react-router/index.tsx:281:5)

      ...

迁移文档中未涵盖此用例，v6 到目前为止还没有测试指南，尽管API 参考确实表明history不再需要该道具：

interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string;
  navigationType?: NavigationType;
  navigator: Navigator;
  static?: boolean;
}

目前尚不清楚 v6 等效项是什么；我尝试切换到navigator={history}但仍然遇到相同的错误。

要重现，请将以下文件复制到新目录中，npm install然后运行npm test：

package.json

{
  "name": "router6-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "testEnvironment": "jsdom"
  },
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-react": "^7.16.0",
    "@testing-library/react": "^12.1.2",
    "jest": "^27.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.0"
  }
}

index.test.js：

const { render } = require("@testing-library/react");
const { createMemoryHistory } = require("history");
const React = require("react");
const { Router } = require("react-router-dom");

it("used to work", () => {
  render(
    <Router history={createMemoryHistory()}></Router>
  );
});

如果你再次npm install --save-dev react-router@5运行npm test，你可以看到这在 v5 中通过了。

标签： reactjsjestjsreact-routerreact-router-domreact-testing-library

解决方案

React Router v6 将历史分成多个部分，对于这个用例，相关部分是navigator和location。在Use useNavigateinstead ofuseHistory中暗示了这种变化，您可以在propsNavigator中使用的类型的定义中看到它：Router

export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;

只是更改history={history}为navigator={history}仍然保留未定义的location道具，路由器试图从中访问pathname（以及其他属性）。要使测试再次工作，请按如下方式更新渲染：

const { render } = require("@testing-library/react");
const { createMemoryHistory } = require("history");
const React = require("react");
const { Router } = require("react-router-dom");

it("works", () => {
  const history = createMemoryHistory();
  render(
    <Router location={history.location} navigator={history}></Router>
  );
});

推荐阅读