Question

此问题已解决

我有一个包含connect()和withRouter的组件。为了呈现自身，它使用this.props.match.params中的路由信息。在我的酶测试中，当我记录match时，我传递给WrappedComponent的{{1}}道具似乎没有传播。但是，如果我添加额外的道具（在props之外的其他键下），它们会传播正常。

以下测试复制了我的问题。我对React很新，所以如果有人对我做错了什么以及我可以做些什么来调试这个，我将不胜感激。

match

运行测试时，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的情况下建议您这样做的话，我会保持这个未解决的问题。

Answer 1

Slawa的answer就是我最终做的事情。测试React Router和Redux的功能没有用。导出普通的React组件使测试更加简单。

Answer 2

也可以不用路由器直接设置参数

<Provider store={store}>
<WrappedTestComponent match={{
  params: {
    param1: param1val,
    param2: param2val
  }
}} />
</Provider>

如何使用Redux和酶测试React Router参数

2 个答案: