Question

我正在尝试学习React w / Jest / Enzyme。

我有一个接收2个道具的组件 -

loadTenantListAction,
filterTenantListAction,

这些道具通过mapDispatchToProps传递 -

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import {
  loadTenantListAction,
  filterTenantListAction,
} from '../../store/actions';

import TenantList from './TenantList';

const mapStateToProps = tenants => ({ tenants });
const mapDispatchToProps = {
  loadTenantListAction,
  filterTenantListAction,
};

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(TenantList)
);

我已经在我的组件中声明了propTypes -

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class TenantList extends Component {
  static propTypes = {
    loadTenantListAction: PropTypes.func.isRequired,
    filterTenantListAction: PropTypes.func.isRequired,
  };
  render() {
    return <p>Foo</p>;
  }
}

我的单元测试现在失败，显示这些道具已标记为必需，但未定义。我期待这一点，因为我没有将它们传递给我的测试 -

import React from 'react';
import { shallow } from 'enzyme';

import TenantListContainer from '../../../src/containers/TenantList';
import TenantList from '../../../src/containers/TenantList/TenantList';

describe('<TenantList />', () => {
  it('should render the TenantList Component', () => {
    const wrapper = shallow(<TenantListContainer />);
    expect(wrapper.find(<TenantList />)).toBeTruthy();
  });
});

我可以通过测试来完成类似

的测试

 expect(
      wrapper.find(
        <TenantList
          loadTenantListAction={() => {}}
          filterTenantListAction={() => {}}
        />
      )
    ).toBeTruthy();

但这似乎根本不对，我也不希望通过这样的方式来编写有用的测试。

我应该如何处理通过mapDispatchToProps传入的道具？

Answer 1

您可以用浅层方法将道具直接传递给组件。

describe('<TenantList />', () => {
  const props = {
    loadTenantListAction: () => {}, // or you can use any spy if you want to check if it's called or not
    filterTenantListAction () => {}, 
  }
  it('should render the TenantList Component', () => {
    const wrapper = shallow(<TenantListContainer {...props} />);
    expect(wrapper.find(<TenantList />)).toBeTruthy();
  });
});

Jest / React / Redux - MapDispatchToProps未定义

1 个答案: