toMatchObject diff displays Received from react-test-renderer as Object instead of JSX

[pedrottimark]

Do you want to request a feature or report a bug?

Report a bug in Jest 18.0.0 running on Node 7.2.1 with npm 3.10.9

In all of the following examples, notice that the findMatchObject helper nicely omits the irrelevant onClick property from the received object in a detailed diff when when toMatchObject assertion fails, as expected. Thank you for this super attention to detail!

But the temporary object derived from received for the diff does not always have a $$typeof property for the ReactTestComponent plugin to pretty-format it as JSX.

What is the current behavior?

EDIT: JSX-versus-Object diff when expected $$typeof is non-enumerable

-<li
-  style={
-    Object {
-      "textDecoration": "none",
-    }
-  }>
-  Install Jest
-</li>
+Object {
+  "children": Array [
+    "Install Jest",
+  ],
+  "props": Object {
+    "style": Object {
+      "textDecoration": "line-through",
+    },
+  },
+  "type": "li",
+}

import React from 'react';
import renderer from 'react-test-renderer';

test('diff displays Object instead of JSX', () => {
  const onClick = jest.fn();
  const text = 'Install Jest';

  const expected = renderer.create(
    <li style={{textDecoration: 'none'}}>{text}</li>
  ).toJSON();
  const received = renderer.create(
    <li style={{textDecoration: 'line-through'}} onClick={onClick}>{text}</li>
  ).toJSON();

  expect(received).toMatchObject(expected);
});

What is the expected behavior?

EDIT: JSX diff when expected $$typeof is enumerable

 <li
   style={
     Object {
-      "textDecoration": "none",
+      "textDecoration": "line-through",
     }
   }>
   Install Jest
 </li>

import React from 'react';
import {shallow} from 'enzyme';
import enzymeToJSON from 'enzyme-to-json';

test('diff displays JSX', () => {
  const onClick = jest.fn();
  const text = 'Install Jest';

  const expected = enzymeToJSON(shallow(
    <li style={{textDecoration: 'none'}}>{text}</li>
  ));
  const received = enzymeToJSON(shallow(
    <li style={{textDecoration: 'line-through'}} onClick={onClick}>{text}</li>
  ));

  expect(received).toMatchObject(expected);
});

Analysis

Object.keys and Object.prototype.hasOwnProperty copy the relevant enumerable properties in: https://github.com/facebook/jest/blob/master/packages/jest-matchers/src/matchers.js#L623-L624

• From react-test-renderer the property is non-enumerable: https://github.com/facebook/react/blob/master/src/renderers/testing/ReactTestRenderer.js#L117-L119
• From enzyme-to-json the property is enumerable, for example, in shallow renderer: https://github.com/adriantoine/enzyme-to-json/blob/master/src/shallow.js#L40

Conclusion

The inconsistency seems important to fix, but not an emergency, because toMatchObject is brand new and the reason I found it is a discussion-in-progress: #2202 (comment)

Creating a derived object with transformed properties from a source which has non-enumerable properties seems like a generic problem, but the subject is new to me, so I will leave to y’all who have more experience to suggest how to solve it :)

If you need, I am glad to create a test repo on Monday.

[pedrottimark]

P.S. to Christoph: what I mentioned about objects with Symbols for keys or values of properties as JS but not JSON was technically correct, but my now-you-see-it-now-you-don’t confusion about $$typeof in console.log was caused by enumerable versus non-enumerable :)

[pedrottimark]

By the way, the case that still confused me until now is that the diff is JSX for non-enumerable received and enumerable expected because received.hasOwnProperty(key) is true and received[key] accesses the value of the non-enumerable property:

    Object.keys(expected).forEach(key => {
      if (received.hasOwnProperty(key)) {
        match = true;

        const exp = expected[key];
        const act = received[key];

[pedrottimark]

Can submit pull request if y’all agree with the following changes to findMatchObject around https://github.com/facebook/jest/blob/master/packages/jest-matchers/src/matchers.js#L618-L637:

• Copy non-enumerable properties of received (for example, $$typeof if received is from react-test-renderer)
• To enumerable keys that are in both expected and received, add enumerable keys in received that are non-enumerable in expected (for example, $$typeof if expected is from react-test-renderer and received is from enzyme-to-json)

[cpojer]

Since this is mostly a printing issue, shall we make it so that only if two objects don't match, the diff we generate will contain all properties, including non-enumerable ones? That way we do this work only if necessary (when a test fails). I guess it means that we need to recursively descend twice though, so it may not be that great after all.

[pedrottimark]

Closing because an expected value from react-test-renderer seems impractical to me now.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.