Question

我刚刚开始我的第一份反应工作（耶！）并且尝试使用 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

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

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

或传递jest模拟功能：

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

如果要检查是否已调用testDispatch（expect(wrapper.instance().props.testDispatch).toBeCalled();）

mapDispatchToProps在jest测试中为props null

1 个答案: