使用Jest时，还有另一种方法可以模拟组件的mapDispatchToProps [英] is there another way to mock component's mapDispatchToProps when using Jest

问题描述

我目前有一个类似的组件:

I currently have a component like so:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getDataAction } from ' './my-component';

export class MyComponent extends { Component } {
   componentWillMount() {
      this.props.getData();
   }
   render(){

      <div>
      this.props.title
     </div>

   }
}

const mapStateToProps = (state) => ({
   title: state.title
});

const mapDispatchToProps = (dispatch) ({
   getData() {
      dispatch(getDataAction());
   }
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

我正在尝试使用玩笑和酶来浅化渲染测试.

and I am trying to shallow render test it using jest and enzyme.

测试:

import React from 'react';
import { shallow } from 'enzyme';
import { MyComponent } from './index';

it('renders without crashing', () => {
  shallow(<MyComponent getData={jest.fn()} />);
});

我的问题是，这是传统的模拟方法吗?开玩笑的官方文档没有特别提到嘲讽道具，这篇文章使用Jest来模拟带有props的React组件是关于完全安装测试. 还有另一种模拟dispatchToProps的方法吗?在此示例中，只有一个，但是如果我在dispatchToProps中有很多函数该怎么办?

My question is, is this the conventional way to mock? Jest official docs don't mention specifically about mocking props and this post Using Jest to mock a React component with props is about testing with full mounting instead. Is there another way to mock dispatchToProps? In this example there is only one, but what if I have a lot of functions in dispatchToProps?

侧问题:在我的真实文件中，我引用了一个类似this.props.information.value的值，由于没有模拟/定义信息，但我没有想到，因此我希望抛出一个类似cannot get value of undefined的错误.仅当不存在函数时，才会引发错误.

Side Question: in my real file, I have a reference to a value like this.props.information.value which I expect to throw an error like cannot get value of undefined since information is not mocked/defined, but it doesn't. It's only when functions are not present that an error is thrown.

推荐答案

您可以导出mapDispatchToProps并通过将其导入测试来为此编写测试.

You can export mapDispatchToProps and write tests for it by importing it in your tests.

在 MyComponent.js

在 MyComponent.js

import configureMockStore from 'redux-mock-store';
import thunkMiddleware from 'redux-thunk';
import { mapDispatchToProps } from './MyComponent';

const configMockStore = configureMockStore([thunkMiddleware]);
const storeMockData = {};
const mockStore = configMockStore(storeMockData);

describe('mapDispatchToProps', () => {
  it('should map getDataAction action to getData prop', () => {
     // arrange
     const expectedActions = [getDataAction.type];
     const dispatchMappedProps = mapDispatchToProps(mockStore.dispatch);
     // act
     dispatchMappedProps.getData();
     // assert
     expect(mockStore.getActions().map(action => action.type)).toEqual(expectedActions);
  }
});

这里我使用过thunk，只是为了让您知道如果您的商店设置中配置了中间件，该怎么做.

如果您使用的是thunks之类的中间件，那么getDataAction在这里也可以是一个函数，而不是像{ type: 'FETCH_DATA' }这样的简单动作.

但是，测试方法是相同的，除了您将使用显式操作类型(例如const expectedActions = ['FETCH_CONTACTS']

)创建expectedActions 这里FETCH_CONTACT是您的重击中分派的另一个动作，即getDataAction

Here I have used thunk, just to let you know that how to do it if there are middlewares configured in your store setup.

Here getDataAction can also be a function instead of a simple action like { type: 'FETCH_DATA' } if you are using middlewares like thunks.

However, the approach to test is same except that you will create expectedActions with explicit action types like const expectedActions = ['FETCH_CONTACTS']

Here FETCH_CONTACT is another action dispatched in your thunk i.e getDataAction

这篇关于使用Jest时，还有另一种方法可以模拟组件的mapDispatchToProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！