withStyles break enzyme tests

Seems like when using the withStyles HOC it’ll actually break my Jest test. It creates children elements where it shouldn’t.

Here is the code to reproduce it:

import React from 'react';
import ReactDOM from 'react-dom';
import { shallow } from 'enzyme';

import withStyles from 'material-ui/styles/withStyles';
import LoadingWrapper from './LoadingWrapper';

const ReproBug = ({ loading, children }) => {
  if (loading) {
    return <span>Loading...</span>;
  }
  return children;
}
const ReproBugWithStyles = withStyles({})(ReproBug);


const children = <span>Dummy Children!</span>;

it('should not render children if loading is true', () => {
  const wrapper = shallow(
    <ReproBug loading={true}>{children}</ReproBug>
  );
  expect(wrapper.contains(children)).toEqual(false);
});

it('should not render children if loading is true', () => {
  const wrapper = shallow(
    // using ReproBugWithStyles instead of ReproBug
    <ReproBugWithStyles loading={true}>{children}</ReproBugWithStyles>
  );
  expect(wrapper.contains(children)).toEqual(false); //<--- this check fails, it is actually true
});

I use the create-react-test and simply run yarn test. (they use Jest and enzyme IIRC)

[oliviertassinari]

It creates children elements where it shouldn’t

@Skaronator The issue isn’t about the children elements but with the intermediary element, it’s creating. The shallow() API of enzyme only render one level depth. Any higher-order component is going to obfuscate the children. You have different workarounds. I would encourage you to refer to the enzyme documentation. Still, here they are:

• use mount()
• use .dive()
• use our createShallow() public API
• use our internal until() helper

[jondbm]

I solved my issue, was an obvious fix. I was using the component name in quotes eg .find(‘Avatar’) instead of importing it into the test and calling it directly .find(Avatar) - no quotes. That worked.