Assertions on a wrapper inconsistently assert on children

[nigelrobbins3]

The behavior of to.have.prop is different than other assertions when used on a mounted wrapper. Take the following example.

class ButtonComponent extends React.Component {
  render() {
    return (
      <div id="foo">
        <span id="bar" />
      </div>
    );
  }
}

const wrapper = mount(<ButtonComponent baz="qux" />);
const spanWrapper = wrapper.find("span");

expect(spanWrapper).to.have.id("bar"); // passes
expect(spanWrapper).to.have.prop("id", "bar"); // passes

expect(wrapper).to.have.id("foo"); // passes
expect(wrapper).to.have.prop("id", "foo"); // fails
expect(wrapper).to.have.prop("baz", "qux"); // passes (even though it's on ButtonComponent)

Notice that the root wrapper treats to.have.id as though it is wrapping the div, but treats to.have.prop as though it is wrapping the ButtonComponent. This behavior is unexpected.

Why would I want to use prop("id", "foo") when I have id("foo")? I like to assert that my elements have a style prop, but I don't care what the values are (I find it very brittle to assert all the style properties and values).

expect(someWrapper).to.have.prop("style")

---

There's some special casing that is done to the root wrapper, because the output from wrapper.debug() is:

<ButtonComponent>
  <div id="foo">
    <span id="bar" />
  </div>
</ButtonComponent>

but wrapper.children().debug():

<span id="bar" />

Either enzyme does something special when it calls children(), or it does something special when it calls debug() on the root element. Regardless, the assertion expect(wrapper).to.have.prop("something") is checking the ButtonComponent element, not the div.

@ljharb brought up some points about this in this issue. In particular, asserting on what props were passed to a component is not meaningful because you pass them yourself when mounting. The current behavior is a bug; the assertion should be using the div.

[ljharb]

Note tho that my comments describe how shallow behaves; it seems mount by necessity behaves differently.

[nigelrobbins3]

Ok. Is it possible to improve that behavior? Or is enzyme not exposing the root node correctly?

The hack I usually use to get the properties of the root node is const root = wrapper.find("div").first(), but it requires knowing that the root element is a div

[ljharb]

const root = wrapper.children().first()?