如何使用 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 时,我传递给WrappedComponentmatch 道具似乎没有传播。但是,如果我添加额外的道具(在 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>,
);

如果有推荐的方法在没有 SwitchRoute 的情况下执行此操作,我将保留这个未决问题。

【问题讨论】:

我认为,这是一个不好的情况,你不应该测试 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 连接功能的浅层组件

如何使用 jest 和酶测试 API 调用?

React-Redux Connected Component测试正确的操作已在click事件上发送

使用玩笑的反应单元测试失败

TypeError:使用 react-create-app jest 和酶进行测试时,调度不是函数

如何在构造函数内部使用上下文的情况下使用 jest 和酶来测试反应上下文?