Test ensuring that elements inspected as they are written

[sunesimonsen]

This test shows that children in inspected as they are written.

[sunesimonsen]

I think this shows pretty well the problem around inspecting the React elements as they are written. If I would like to assert that this structure contains the following:

expect(
  enzyme.mount(
    <ReverseChildren>
      <span>One</span>
      <span>Two</span>
      <span>Three</span>
    </ReverseChildren>
  ),
  'to contain',
  <div>
    <span>Three</span>
    <span>Two</span>
    <span>One</span>
  </div>
);

This passes.

But if we make it fail:

expect(
  enzyme.mount(
    <ReverseChildren>
      <span>One</span>
      <span>Two</span>
      <span>Three</span>
    </ReverseChildren>
  ),
  'to contain',
  <div>
    <span>Three</span>
    <span>Two!</span>
    <span>One</span>
  </div>
);

You get this:

expected
<ReverseChildren>
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</ReverseChildren>
to contain <div><span>Three</span><span>Two!</span><span>One</span></div>

the best match was
One // should be <div><span>Three</span><span>Two!</span><span>One</span></div>

That is really unhelpful :-S

I would much prefer something like this instead:

expected <div><span>Three</span><span>Two</span><span>One</span></div> to contain
<div>
  <span>Three</span>
  <span>Two!</span>
  <span>One</span>
</div>

<div>
  <span>Three</span>
  <span>
    Two // should equal 'Two!'
        //
        // Two
        // Two!
  </span>
  <span>One</span>
</div>