mount fails to find className on root component

[pfhayes]

This fails when I would expect it to succeed (and it did succeed in 2.x)

it('enzyme', () => {
  const F = (props) => <div className={props.className}/>; 
  const test = mount(<F className="x"/>);
  expect(test.find('.x').length).toBe(1);
});

Notably, this slight modification does succeed:

it('enzyme', () => {
  const test = mount(<div className="x"/>);
  expect(test.find('.x').length).toBe(1);
});

as does this one

it('enzyme', () => {
  const F = (props) => <div className={props.className}/>; 
  const test = shallow(<F className="x"/>);
  expect(test.find('.x').length).toBe(1);
});

so it appears to be specifically related to custom components and mount

[pfhayes]

cc @ljharb - is this indeed a regression or intended behaviour?

[ljharb]

What does test.debug() output?

[pfhayes]

It outputs the following:

      <F className="x">
        <div className="x" />
      </F>

[ljharb]

So there's two things with the className of .x - it seems like maybe you want #1179's hostNodes, such that you can do test.hostNodes().find('.x') - in the meantime, test.filter(n => typeof n.type() === 'string').find('.x') will work.

[pfhayes]

The debugging output has two items with className="x" but the actual rendered DOM output would not include the <F/> tag, right?

For example, in the shallow example test.debug() outputs this:

<div className="x" />

It seems to me that the <F/> turning up in the .find call is quite unexpected (and certainly inconsistent between mount and shallow). Is using hostNodes() the intended solution going forward?

Overall this issue does just appear to be a duplicate of #1174, though that issue does not address the inconsistency between mount and shallow. Which is the correct behaviour?

[ljharb]

They need not be consistent; they're different conceptual APIs.

[ljharb]

This is answered; please see the attached project for tracking this discontinuity between mount and shallow.