mapDispatchToProps 道具在开玩笑测试中为空

Question

我刚刚开始了我的第一份 react 工作（耶！）并且我尝试使用 jest 编写单元测试。我在测试中遇到了 mapDispatchToProps 的问题。

请注意，测试通过了，但它抛出以下错误消息：

警告：失败的道具类型：道具testDispatch在TestJest中标记为必填，但在TestJest中其值为undefined

错误似乎是与测试相关的测试，因为在 Web 浏览器中运行页面时不会抛出它。此外，mapStateToProps 工作正常，包括在内以显示它的工作原理。

使用酶/浅，以免与<Child/> 组件交互。

testJest.js

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import Child from './Child'

export class TestJest extends React.Component {
  render() {
    return (<div>ABC - <Child /></div>);
  }
}

TestJest.propTypes = {
  testDispatch: PropTypes.func.isRequired,
  testState: PropTypes.arrayOf(PropTypes.string)
};

const mapStateToProps = (state) => {
  return {
    testState: state.utilization.pets    // ['dog','cat']
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    testDispatch: () => dispatch({'a' : 'abc'})
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(TestJest);

testJest-test.js

import React from 'react';
import { TestJest } from '../Components/testJest';
import TestJestSub2 from '../Components/TestJestSub2';
import { shallow } from 'enzyme';

describe('TESTJEST', () => {
  it('matches snapshot', () => {
    const wrapper = shallow(<TestJest />);
    expect(wrapper).toMatchSnapshot();
  });
});

Answer 1

您可以将空函数作为testDispatch 属性传递给TestJest：

it('matches snapshot', () => {
  const wrapper = shallow(<TestJest testDispatch={() => {}} />);
  expect(wrapper).toMatchSnapshot();
});

或传递 jest mock 函数：

it('matches snapshot', () => {
  const wrapper = shallow(<TestJest testDispatch={jest.fn()} />);
  expect(wrapper).toMatchSnapshot();
});

如果你想检查是否调用了 testDispatch (expect(wrapper.instance().props.testDispatch).toBeCalled();)