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

@@ -232,13 +232,27 @@ Received:
 exports[`.toBe() fails for: [] and [] 1`] = `
 "<dim>expect(<red>received</><dim>).toBe(<green>expected</><dim>)
 
-Looks like you wanted to test for object/array equity with strict \`toBe\` matcher. You probably need to use \`toEqual\` instead."
+Expected value to be (using ===):
+  <green>[]</>
+Received:
+  <red>[]</>
+
+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`] = `
 "<dim>expect(<red>received</><dim>).toBe(<green>expected</><dim>)
 
-Looks like you wanted to test for object/array equity with strict \`toBe\` matcher. You probably need to use \`toEqual\` instead."
+Expected value to be (using ===):
+  <green>{\\"a\\": 1}</>
+Received:
+  <red>{\\"a\\": 1}</>
+
+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`] = `
@@ -263,7 +277,14 @@ Difference:
 exports[`.toBe() fails for: {} and {} 1`] = `
 "<dim>expect(<red>received</><dim>).toBe(<green>expected</><dim>)
 
-Looks like you wanted to test for object/array equity with strict \`toBe\` matcher. You probably need to use \`toEqual\` instead."
+Expected value to be (using ===):
+  <green>{}</>
+Received:
+  <red>{}</>
+
+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,29 +68,24 @@ const matchers: MatchersObject = {
           `Received:\n` +
           `  ${printReceived(received)}`
       : () => {
-          if (
+          const suggestToEqual =
             getType(received) === getType(expected) &&
             (getType(received) === 'object' || getType(expected) === 'array') &&
-            equals(received, expected, [iterableEquality])
-          ) {
-            return (
-              matcherHint('.toBe') +
-              '\n\n' +
-              'Looks like you wanted to test for object/array equity with strict `toBe` matcher. You probably need to use `toEqual` instead.'
-            );
-          }
+            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}` : '')
           );
         };