Fixing output not matching how enzyme wrappers are matched

[GreenGremlin]

At some point in Enzyme v2 a change was made to wrapper.find to return matches for both host (aka DOM) nodes as well as custom components.

Take for example this code.

const User = props => <span className={props.className}>User {props.index}</span>;

const UserList = () => (
  <ul>
    <li>
      <User index={1} className="userOne" />
    </li>
    <li>
      <User index={2} className="userTwo" />
    </li>
  </ul>
);

const wrapper = mount(<Fixture />); // mount/render/shallow when applicable

expect(wrapper).toContainExactlyOneMatchingElement('.userOne');

The above assertion would fail because wrapper.find('.userOne') returns two matches, User.userOne and span.userOne. This is fine, and can be worked around by qualifying the query with a tag name like span.userOne. The problem is that currently, toContainExactlyOneMatchingElement prints only HTML output, and if you only see the HTML output, it seems like the assertion should not fail.

This change updates the html function to print the full element tree using wrapper.debug(), ensuring it's clear why the assertion failed.

I have a follow-on change to add specialized matchers that will only match against host nodes, which is why I added the hostNodesOnly argument to the html function.

[GreenGremlin]

Is there anything I can do to help get this merged?

[GreenGremlin]

I'm sure you're all pretty busy, but it would be nice to see this and https://github.com/FormidableLabs/enzyme-matchers/pull/337 merged, if possible.

[GreenGremlin]

Closing this PR, due to its age, but it would still be nice to have.

[ljharb]

Age shouldn’t be a factor :-) let’s leave this open.