Stop considering properties not passed to expect.objectContaining as "Received" in the failure diff

[MarkyMarkMcDonald]

🚀 Feature Proposal

Improve the diff highlighting for expect.objectContaining

Motivation

This makes it faster to identify the cause of a matcher failure.

Example

Here is a contrived example of a failing test (the actual case I ran into had many more properties):

  describe('Lots of nonessential properties', () => {
    test('example failure', () => {
      const card = {
        suite: 'Heart',
        rank: '12',
        accessor: 0,
        style: {
          width: '100px',
          height: '20px',
        },
        component: function() {
          return React.createElement('div', [], {className: 'card'});
        }
      };

      expect(card).toEqual(expect.objectContaining({rank: 10, suite: 'Heart'}));
    });
  });

The error message helpfully grays out the "suite" in the diff because expect.objectContaining knows that 'Heart' is correct. However, all of the properties it does not care about, like "accessor", "style", and "component" are highlighted as red along with the actual culprit, "rank". Here's a screenshot of the sample output:

or you can try it out yourself here: https://repl.it/repls/ContentAlarmingExponent

I'd prefer if "accessor", "style", and "component" were treated similar to "suite" and formatted accordingly.

Pitch

Why does this feature belong in the
Jest core platform?

This is a change to the existing logic, not an additional feature

Common feature proposals that do not typically make it to core:

• New matchers (see
  jest-extended)
• Changes to the default reporter (use custom reporters instead)
• Changes to node/jsdom test environments (use custom environments instead)

[MarkyMarkMcDonald]

If this is a desired change, any pointers for where to start looking in the code?

[SimenB]

This makes it harder to pick up on typos, doesn't it?

I supoose we could differentiate between value inequalities and key inequalities, and if all keys are present, just print those

[MarkyMarkMcDonald]

I'm not sure if it would make it harder - if the keys are mismatched then the diff shows the expectation's mismatched key in green. Making a typo in my above example looks like this:

(https://repl.it/repls/CreamyTreasuredTriggers)

Do you think it would be harder to spot the typo if component, rank, style, and suite were the same color as accessor?

edit: I like your idea of only displaying a more selective diff when the keys match, that works for me

[w0rp]

I was going to file an issue for this myself, and I found that someone else was confused by the same thing. The output is confusing here. If you're testing for only properties a, b, and c, you can get confused by the presence of other attributes in the output. It would be nice if it maybe showed - and + only for the attributes you were checking for, and showed something else for other attributes you weren't testing for.

I don't have a solution, but I did find it confusing.

[github-actions]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[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.