Testing components using both widthWidth and withStyles

When using createShallow({ dive: true }) only one level of unwrapping seems to occur on components using both withWidth and withStyles.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

With a simple component, like:

const Message = ({ classes, text }) => (
  <Typography className={classes.message}>{text}</Typography>
);

export default withWidth()(withStyles(styles)(Message));

we’d like to write a test asserting the content of the message, eg:

describe('render', () => {
  let shallow;
  let wrapper;
  let text;

  beforeEach(() => {
    text = 'Hello, world!';
    shallow = createShallow({ dive: true });
    wrapper = shallow(<Message text={text} />);
    console.log(wrapper.debug());
  });

  it('should render the text prop', () => {
    expect(wrapper.find('Typography').text()).toContain(text);
  });
});

Current Behavior

It looks like createShallow({ dive: true }) only unwraps withWidth, and we still have Message enclosed in withStyles.

console.log src/Message.test.js:19
  <Fragment>
    <WithStyles(Message) width="md" text="Hello, world!" />
    <EventListener target="window" onResize={[Function: debounced]} />
  </Fragment>

render › should render the text prop
  Method “text” is only meant to be run on a single node. 0 found instead.

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1815:17)
      at ShallowWrapper.text (node_modules/enzyme/build/ShallowWrapper.js:1000:21)
      at Object.it (src/Message.test.js:23:39)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>

Steps to Reproduce

Link:

1. Just run sample yarn test @ https://github.com/eideer/mui-hoc

Context

Your Environment

Tech	Version
Material-UI	v3.1.0
React	v16.5.1
enzyme	v3.6.0

[erkde]

Thanks @oliviertassinari - using find on the fragment is what I was missing, then recursing with shallow is working fine:

  beforeEach(() => {
    text = 'Hello, world!';
    shallow = createShallow({ dive: true });
    wrapper = shallow(<Message text={text} />).find("WithStyles(Message)");
    wrapper = until.call(wrapper.shallow({}), 'Message');
  });

  it('should render the text prop', () => {
    expect(wrapper.find('WithStyles(Typography)').html()).toContain(text);
  });

[oliviertassinari]

@eideer It’s because the withWith is using a fragment. See #12825.