在测试中使用MemoryRouter时，不在道具上设置'match'属性

Posted 2021-04-06

我一直试图让反应路由器v4的测试工作。我已经记录了基本的example here并为其编写了以下测试：

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组件未设置的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'}} />，但documentation here似乎暗示这可以通过MemoryRouter完成。

任何帮助非常感谢。

答案

match，history和location props仅传递给Route组件呈现的组件。需要访问这些属性的其他组件可以通过调用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包装的组件。

另一答案

我相信<Route component={Topic} />而不是<Topic/>也会奏效。