[WIP] Make toBe matcher error message more helpful for objects and arrays (#4277)

* Make toBe matcher error message more helpful for objects and arrays

* Just add a message at the bottom instead of replacing it

Author: rogeliog

packages/jest-matcher-utils/src/index.js

@@ -49,6 +49,10 @@ const NUMBERS = [
   'thirteen',
 ];
 
+const SUGGEST_TO_EQUAL = chalk.dim(
+  'Looks like you wanted to test for object/array equality with strict `toBe` matcher. You probably need to use `toEqual` instead.',
+);
+
 const stringify = (object: any, maxDepth?: number = 10): string => {
   const MAX_LENGTH = 10000;
   let result;
@@ -165,6 +169,7 @@ module.exports = {
   EXPECTED_COLOR,
   RECEIVED_BG,
   RECEIVED_COLOR,
+  SUGGEST_TO_EQUAL,
   ensureActualIsNumber,
   ensureExpectedIsNumber,
   ensureNoExpected,

packages/jest-matchers/src/__tests__/__snapshots__/matchers.test.js.snap

@@ -239,7 +239,7 @@ Received:
 
 Difference:
 
-<dim>Compared values have no visual difference."
+<dim>Compared values have no visual difference. <dim>Looks like you wanted to test for object/array equality with strict \`toBe\` matcher. You probably need to use \`toEqual\` instead."
 `;
 
 exports[`.toBe() fails for: {"a": 1} and {"a": 1} 1`] = `
@@ -252,7 +252,7 @@ Received:
 
 Difference:
 
-<dim>Compared values have no visual difference."
+<dim>Compared values have no visual difference. <dim>Looks like you wanted to test for object/array equality with strict \`toBe\` matcher. You probably need to use \`toEqual\` instead."
 `;
 
 exports[`.toBe() fails for: {"a": 1} and {"a": 5} 1`] = `
@@ -284,7 +284,7 @@ Received:
 
 Difference:
 
-<dim>Compared values have no visual difference."
+<dim>Compared values have no visual difference. <dim>Looks like you wanted to test for object/array equality with strict \`toBe\` matcher. You probably need to use \`toEqual\` instead."
 `;
 
 exports[`.toBe() fails for: 1 and 2 1`] = `

packages/jest-matchers/src/matchers.js

@@ -16,6 +16,7 @@ import {escapeStrForRegex} from 'jest-regex-util';
 import {
   EXPECTED_COLOR,
   RECEIVED_COLOR,
+  SUGGEST_TO_EQUAL,
   ensureNoExpected,
   ensureNumbers,
   matcherHint,
@@ -67,17 +68,24 @@ const matchers: MatchersObject = {
           `Received:\n` +
           `  ${printReceived(received)}`
       : () => {
+          const suggestToEqual =
+            getType(received) === getType(expected) &&
+            (getType(received) === 'object' || getType(expected) === 'array') &&
+            equals(received, expected, [iterableEquality]);
+
           const diffString = diff(expected, received, {
             expand: this.expand,
           });
+
           return (
             matcherHint('.toBe') +
             '\n\n' +
             `Expected value to be (using ===):\n` +
             `  ${printExpected(expected)}\n` +
             `Received:\n` +
             `  ${printReceived(received)}` +
-            (diffString ? `\n\nDifference:\n\n${diffString}` : '')
+            (diffString ? `\n\nDifference:\n\n${diffString}` : '') +
+            (suggestToEqual ? ` ${SUGGEST_TO_EQUAL}` : '')
           );
         };