Error message for shallow render contains

[armsteadj1]

Currently it shows you the entire render html when this errors.

For example:

function Bar() {
  return (
    <div>
      <div className="in-bar" />
    </div>
  );
}

function Foo() {
  return (
    <div>
      <Bar attr="12" />
    </div>
  );
}

expect(shallow(<Foo>)).to.contain(<Bar attr="13" />);

when this errors it does a .html() on the wrapper and would show:

Failure: Expected <Foo /> to contain <Bar attr="13" />

<div>
    <div>
      <div className="in-bar" />
    </div>
</div>

This makes it extremely hard to understand exactly why the test is failing.

Would anyone be against adding an overload to do a .debug() instead so the following would be output. Or better yet, always use debug for shallow wrappers.

So the following would be shown:

Failure: Expected <Foo /> to contain <Bar attr="13" />

<div>
    <Bar attr="12">
</div>

Thoughts?

[ljharb]

That seems way better to me.

[ayrton]

Sounds more than reasonable

[armsteadj1]

Doing it for only Shallow is actually what jest-enzyme does as well:

https://github.com/FormidableLabs/enzyme-matchers/blob/master/packages/enzyme-matchers/src/utils/html.js

[armsteadj1]

I'll get a pull request created. Thanks!