Improve toWarnDev matcher DX for unexpected warnings (#12082)

Use jest-diff to format the warnings in a way that makes it easier to spot the differences.

scripts/jest/matchers/toWarnDev.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const jestDiff = require('jest-diff');
+
 function normalizeCodeLocInfo(str) {
   return str && str.replace(/at .+?:\d+/g, 'at **');
 }
@@ -39,13 +41,19 @@ const createMatcherFor = consoleMethod =>
           }
         }
 
-        let errorMessage = `Unexpected warning recorded:\n${this.utils.printReceived(
-          message
-        )}`;
-        if (expectedMessages.length > 0) {
-          errorMessage += `\n\nThe following expected warnings were not yet seen:\n${expectedMessages
-            .map(unformatted => this.utils.printExpected(unformatted))
-            .join('\n')}`;
+        let errorMessage;
+        if (expectedMessages.length === 0) {
+          errorMessage =
+            'Unexpected warning recorded: ' +
+            this.utils.printReceived(normalizedMessage);
+        } else if (expectedMessages.length === 1) {
+          errorMessage =
+            'Unexpected warning recorded: ' +
+            jestDiff(normalizedMessage, expectedMessages[0]);
+        } else {
+          errorMessage =
+            'Unexpected warning recorded: ' +
+            jestDiff([normalizedMessage], expectedMessages);
         }
 
         // Record the call stack for unexpected warnings.