如何使用 Redux 和酶测试 React Router 参数
Posted
技术标签:
【中文标题】如何使用 Redux 和酶测试 React Router 参数【英文标题】:How to test React Router params with Redux and enzyme 【发布时间】:2018-04-12 00:52:21 【问题描述】:已解决
我有一个用connect()
和withRouter
包裹的组件。为了呈现自己,它使用this.props.match.params
中的路由信息。在我的酶测试中,当我记录props
时,我传递给WrappedComponent
的match
道具似乎没有传播。但是,如果我添加额外的道具(在 match
之外的不同键下),它们可以正常传播。
以下测试复制了我的问题。我对 React 还很陌生,所以如果有人对我做错了什么以及我可以做些什么来调试有什么建议,我将不胜感激。
import React, Component from 'react';
import PropTypes from 'prop-types';
import mount from 'enzyme';
import configureStore from 'redux-mock-store';
import MemoryRouter, withRouter from 'react-router-dom';
import Provider, connect from 'react-redux';
class TestComponent extends Component
constructor(props)
super(props);
console.log(props);
render()
const params = this.props.match;
return (
<div>
params.var1
</div>
);
TestComponent.propTypes =
match: PropTypes.shape(
params: PropTypes.shape(
var1: PropTypes.string.isRequired,
),
).isRequired,
;
const WrappedComponent = withRouter(connect()(TestComponent));
describe('WrappedComponent', () =>
const mockStore = configureStore();
const initialState = ;
let store;
let wrapper;
beforeEach(() =>
store = mockStore(initialState);
const props =
match:
params:
roomType: 'public',
roomName: 'test',
,
,
;
wrapper = mount(
<Provider store=store>
<MemoryRouter>
<WrappedComponent ...props />
</MemoryRouter>
</Provider>,
);
);
it('renders without crashing', () =>
expect(wrapper).toHaveLength(1);
);
);
当我运行测试时,match.params
是 。
console.error node_modules/react/node_modules/fbjs/lib/warning.js:33
Warning: Failed prop type: The prop `match.params.roomType` is marked as required in `TestComponent`, but its value is `undefined`.
in TestComponent (created by Connect(TestComponent))
in Connect(TestComponent) (created by Route)
in Route (created by withRouter(Connect(TestComponent)))
in withRouter(Connect(TestComponent)) (at TestComponent.js:56)
in Router (created by MemoryRouter)
in MemoryRouter (at TestComponent.js:55)
in Provider (created by WrapperComponent)
in WrapperComponent
console.log src/components/__tests__/TestComponent.js:11
match: path: '/', url: '/', params: , isExact: true ,
location:
pathname: '/',
search: '',
hash: '',
state: undefined,
key: '5gc3i1' ,
history:
length: 1,
action: 'POP',
location:
pathname: '/',
search: '',
hash: '',
state: undefined,
key: '5gc3i1' ,
index: 0,
entries: [ [Object] ],
createHref: [Function: createPath],
push: [Function: push],
replace: [Function: replace],
go: [Function: go],
goBack: [Function: goBack],
goForward: [Function: goForward],
canGo: [Function: canGo],
block: [Function: block],
listen: [Function: listen] ,
staticContext: undefined,
dispatch: [Function: dispatch]
编辑:我已经通过修改它以使用它来通过测试:
wrapper = mount(
<Provider store=store>
<MemoryRouter initialEntries=['/param1val/param2val']>
<Switch>
<Route path="/:param1/:param2" component=WrappedTestComponent />
</Switch>
</MemoryRouter>
</Provider>,
);
如果有推荐的方法在没有 Switch
和 Route
的情况下执行此操作,我将保留这个未决问题。
【问题讨论】:
我认为,这是一个不好的情况,你不应该测试 React Router 和 Redux 的功能,直接将 props 传递给组件就足以测试 React 组件的功能 好的,我会尝试只导出TestComponent
并传入它需要的道具。 :)
【参考方案1】:
Slawa 的answer 是我最终做的。测试 React Router 和 Redux 的功能是没有用的。导出普通的 React 组件使测试更加简单。
【讨论】:
【参考方案2】:也可以不用路由器直接设置参数
<Provider store=store>
<WrappedTestComponent match=
params:
param1: param1val,
param2: param2val
/>
</Provider>
【讨论】:
以上是关于如何使用 Redux 和酶测试 React Router 参数的主要内容,如果未能解决你的问题,请参考以下文章
Jest/Enzyme 单元测试:如何将存储传递给使用 redux 4 和 react-redux 6 连接功能的浅层组件
React-Redux Connected Component测试正确的操作已在click事件上发送