开玩笑 / react / redux- mapdispatchtoprops不确定

Question

我正在尝试学习w/jest/酶。

我有一个接收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();
  });
});