Question

我有一个反应容器：

export const SomeContainer = ({disabled, onClick}) => {
  let someElement = <img src="/path">
  return (
    <CustomButton className="my-class" icon={someElement} onClick={onClick} disabled={disabled}>
  );
};

const mapStateToProps = (state) => ({
  disabled: state.stateSet1.disabled,
});

const mapDispatchToProps = (dispatch) => ({
  onClick: () => { dispatch(someAction()); },
});

SomeContainer.propTypes = {
  disabled: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
};

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

我正在写这样的测试：

import { SomeContainer } from './SomeContainer'

describe('SomeContainer', () => {
  const onClickMock = jest.fn();

  // this test is passing
  it('has my class', () => {
    const initialProps = {
      disabled: false,
      onClick: onClickMock,
    };
    const someContainer = shallow(<SomeContainer {...initialProps} />);
    expect(someContainer.hasClass('my-class')).toEqual(true);
  });

  // this test is failing
  it('has image icon', () => {
    const initialProps = {
      disabled: false,
      onClick: onClickMock,
    };
    const someContainer = shallow(<SomeContainer {...initialProps} />);
    expect(someContainer.find('img')).toEqual(true);
  });
});

错误是：

TypeError: val.entries is not a function

  at printImmutableEntries (node_modules/pretty-format/build/plugins/immutable.js:45:5)
  at Object.exports.serialize (node_modules/pretty-format/build/plugins/immutable.js:179:12)
  at printPlugin (node_modules/pretty-format/build/index.js:245:10)
  at printer (node_modules/pretty-format/build/index.js:290:12)
  at keys.map.key (node_modules/pretty-format/build/plugins/lib/markup.js:30:19)
  at Array.map (native)
  at exports.printProps (node_modules/pretty-format/build/plugins/lib/markup.js:28:3)
  at Object.exports.serialize (node_modules/pretty-format/build/plugins/react_element.js:57:24)
  at printPlugin (node_modules/pretty-format/build/index.js:245:10)
  at printer (node_modules/pretty-format/build/index.js:290:12)
  at keys.map.key (node_modules/pretty-format/build/plugins/lib/markup.js:30:19)
  at Array.map (native)
  at exports.printProps (node_modules/pretty-format/build/plugins/lib/markup.js:28:3)
  at Object.exports.serialize (node_modules/pretty-format/build/plugins/react_element.js:57:24)
  at printPlugin (node_modules/pretty-format/build/index.js:245:10)
  at printer (node_modules/pretty-format/build/index.js:290:12)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:180:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:232:42)
  at printer (node_modules/pretty-format/build/index.js:302:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:180:21)
  at printComplexValue (node_modules/pretty-format/build/index.js:232:42)
  at prettyFormat (node_modules/pretty-format/build/index.js:446:10)
  at pass (node_modules/expect/build/matchers.js:439:50)
  at message (node_modules/expect/build/index.js:107:16)
  at Object.throwingMatcher [as toEqual] (node_modules/expect/build/index.js:215:23)
  at Object.<anonymous> (tests/jest/containers/SomeButton.test.js:63:38)
  at process._tickCallback (internal/process/next_tick.js:103:7)

我测试错了吗？我无法弄清楚这个错误测试是否有问题。我有反应组件的类似测试（它不使用mapDispatchToProps但是使用connect来获取状态）并且那些传递（我在那里使用mount）。我也尝试在测试中将它包装在提供程序中但得到相同的错误。

如果我使用mount代替shallow，我会收到此错误：

TypeError: 'Symbol(Symbol.toPrimitive)' returned for property 'Symbol(Symbol.toPrimitive)' of object '[object Object]' is not a function

Answer 1

如果您需要测试子组件的存在（比容器组件的直接子组件更深），则需要使用render，否则子组件将不会被渲染。

此外，测试redux连接组件的常见模式（测试不依赖于redux功能）是从组件中导出第二个，而不是default unwrapped 组件文件。例如：

export unwrappedSomeContainer = SomeContainer;
export default connect(mapStateToProps, mapDispatchToProps)(SomeContainer);

然后，在您的测试中，导入未展开的版本：

import { unwrappedSomeContainer } from './SomeContainer';

// In test
const someContainer = shallow(<unwrappedSomeContainer {...initialProps} />);

这样，在执行浅渲染时，您不会被redux作为父级添加到您尝试测试的组件的高阶组件阻止。

Jest酶在容器测试中发现错误

1 个答案: