Question

我一直在努力为react-router 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>
  );
});

我收到错误：＆＃34; TypeError：无法读取属性＆＃39; params＆＃39;未定义＆＃34; ，我将其解释为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完成。

非常感谢任何帮助。

Answer 1

match，history和location道具仅传递给由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包装的组件。

Answer 2

我相信用struct foo { foo(); ~foo(); }; inline void f2(foo& x) { // no warning, f2() can be expanded inline } inline void f3(foo x) { // Warning: Functions taking class-by-value argument(s) are // not expanded inline in function f3(foo) }代替<Route component={Topic} />也可以。

＆＃39;匹配＆＃39;在测试中使用MemoryRouter时，不在道具上设置属性

2 个答案: