how to select root DOM element rendered with mount

[nfcampos]

With this example:

class Foo extends Component {
  render () {
    return <div className='foo'>{this.props.foo}</div>
  }
}

...

const wrapper = mount(<Foo foo="bar" />)
const div = wrapper // which method do I call to select the root rendered node of a wrapper?
expect(div.prop('className')).to.equal('foo')

How do I select the root rendered node of a mount wrapper? Note I'm not asking about how to select the div in this particular example (eg. .find('div'), .find({className: 'foo'}). I want to select the root rendered node of this wrapper so that I can assert something about it, so I can't select by the type nor by its props.

@aweary this is kind of related to the issue you just posted #445 because basically what I'm asking is, when using mount, how do I select the node that shallow always returns

[finaiized]

Are you looking for instance? This would give you the root node that you rendered.

[nfcampos]

@finaiized thanks! but no, I want the root DOM element that was rendered

[blainekasten]

Wouldn't you just query for it like anything else since wrappers are just a HOC? So if your component renders a <span> at top level you just do wrapper.find('span')

I don't really see the need for a separate method for getting that.

[nfcampos]

if you have a component that conditionally renders either a span or a div then that doesn't work. The point is that without a method that selects the top level rendered element you're always forced to assume something about it to be able to select it, which in some cases defeats the purpose of the test, because whatever I'm forced to assume to be able to select is exactly what I wanted to test. makes sense?

[blainekasten]

feels moot. If it conditionally renders that. You are going to know what condition triggers which, and test for both of those. And if that is the only use case I don't see the benefit of an API here still, seems too one-off.

[nfcampos]

another problem is that by selecting all div elements I'm potentially getting much more than the root element, is the root element guaranteed to always be .find('div').first() (if the root element is a div)? if it is indeed guaranteed to always be the first then that's enough for me

[blainekasten]

Pretty sure. Can't see any reason why it wouldn't be? Worth some investigation. But I think so.

[nfcampos]

yep, from looking at https://github.com/airbnb/enzyme/blob/master/src/MountedTraversal.js#L245 it does look like the array of nodes outputted by find is ordered from parent to child, so the root div should be the first. this can be closed now then, thanks @blainekasten