使用 Jest 时是否有另一种方法来模拟组件的 mapDispatchToProps

Question

我目前有这样一个组件：

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)

我正在尝试使用 jest 和 enzyme 对其进行浅层渲染测试。

测试：

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

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

我的问题是，这是模拟的常规方式吗？ Jest 官方文档没有特别提到模拟道具，这个 post 是关于完全安装的测试。还有另一种模拟 dispatchToProps 的方法吗？在这个例子中只有一个，但是如果我在 dispatchToProps 中有很多函数怎么办？

附带问题：在我的真实文件中，我引用了一个像 this.props.information.value 这样的值，我希望它会抛出一个像 cannot get value of undefined 这样的错误，因为信息不是 mocked/defined，但是它没有。只有当函数不存在时才会抛出错误。

Answer 1

您可以导出 mapDispatchToProps 并通过在测试中导入它来为其编写测试。

在 MyComponent.js

末尾添加 export { mapDispatchToProps };

在 MyComponent.js

旁边创建 MyComponent.tests.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，只是想让你知道如果你的商店设置中配置了中间件该怎么做。

这里 getDataAction 也可以是一个函数，而不是像 { type: 'FETCH_DATA' } 这样的简单操作，如果你正在使用像 thunks 这样的中间件。

但是，测试方法是相同的，只是您将创建 expectedActions 具有明确的操作类型，例如 const expectedActions = ['FETCH_CONTACTS']

这里 FETCH_CONTACT 是在你的 thunk 中调度的另一个动作，即 getDataAction

使用 Jest 时是否有另一种方法来模拟组件的 mapDispatchToProps

is there another way to mock component's mapDispatchToProps when using Jest

reactjs

jestjs

enzyme