在测试中使用 MemoryRouter 时，道具上未设置“匹配”属性

Question

我一直在尝试让测试适用于 react-router v4。我已经在这里记录了基本示例并为其编写了以下测试：

import React from 'react';
import { Topic } from './App';
import { MemoryRouter } from 'react-router-dom'
import TestRenderer from 'react-test-renderer';

test('it renders', () => {
  TestRenderer.create(
    <MemoryRouter initialEntries={['/topics/props-v-state']} initialIndex={0}>
        <Topic/>
    </MemoryRouter>
  );
});

我收到错误消息：“TypeError：无法读取未定义的属性‘params’”，我将其解释为match未在Topic组件的props 上设置的属性MemoryRouter。我的依赖项是：

"dependencies": {
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "react-router-dom": "^4.2.2",
  "react-scripts": "1.1.0"
},
"devDependencies": {
  "babel-jest": "22",
  "babel-preset-es2015": "6",
  "babel-preset-react": "6",
  "jest": "22",
  "react-test-renderer": "16"
},

我想我可以这样做，<Topic match={{url: '/topics/props-v-state'}} />但这里的文档 似乎暗示这可以通过 MemoryRouter 来完成。

非常感谢任何帮助。

Answer 1

的match，history和location道具仅传递给由路由组件呈现组件。其他需要访问这些属性的组件可以通过调用withRouter HOC来包装。

你的例子可以写成：

import React from 'react';
import { Topic } from './App';
import { MemoryRouter, withRouter } from 'react-router-dom';
import TestRenderer from 'react-test-renderer';

const RTopic = withRouter(Topic);

test('it renders', () => {
  TestRenderer.create(
    <MemoryRouter initialEntries={['/topics/props-v-state']} initialIndex={0}>
        <RTopic/>
    </MemoryRouter>
  );
});

作为替代方案，您的 App 模块可以直接导出由 withRouter 包装的组件。