Jest enzyme find giving error in container test

Question

I have a react container:

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);

I'm writing the test like this:

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);
  });
});

The error is:

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)

Am I testing this wrong? I'm not able to figure out with this error whats wrong with the test. I have similar tests for react components (which does not use mapDispatchToProps but are using connect to get the state) and those are passing (I'm using mount there). I also tries wrapping it in the provider in test but get the same error.

If I use mount instead of shallow I get this error:

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

Answer 1

If you need to test the existence of child components (that are deeper than direct children of your container component) you'll need to use render , otherwise the children won't ever get rendered.

Also, a common pattern for testing redux-connected components, where the test does not rely on the redux functionality, is to export a second, not default unwrapped component from your component file. For example:

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

Then, in your test, import the unwrapped version:

import { unwrappedSomeContainer } from './SomeContainer';

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

This way, when doing a shallow render, you're not being blocked by the higher-order component that redux attaches as a parent to the component that you're trying to test.