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

Question

这已经解决了

我有一个用connect()and包裹的组件withRouter。为了呈现自身，它使用this.props.match.params. 在我的测试酶，在match我传递给道具WrappedComponent似乎并不当我登录的传播props。但是，如果我添加额外的道具（在不同的键下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] }

---

编辑：我已经通过修改它以使用它来通过测试：

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] }

如果有推荐的方法可以在没有Switchand 的情况下执行此操作，我将保持这个悬而未决的问题Route。

Answer 1

斯拉瓦的回答就是我最终所做的。测试 React Router 和 Redux 的功能没有什么用。导出普通的 React 组件使测试变得更加简单。