Improve message/stack parsing for Babel code frame errors

Previously, _addMissingMessageToStack decides not to add in the message to what we display, because it can't identify it as a stack. If we fix that by setting stack to include the message upfront (as many browsers do anyway), then it is printed but not prominently -- it is grayed out and with the stack with still only "Error" on the first line. Now if separateMessageFromStack can't tell where the stack begins, we assume the first line is the message -- which will cause it to be displayed more prominently.

We could also try to detect code frames in separateMessageFromStack specifically (as we do stacks) but that doesn't seem trivial, in part because the code frame has already been colorized by the time it gets here.

Before:

![before screenshot](https://user-images.githubusercontent.com/6820/47889870-6d064700-de09-11e8-8d4a-a044f2ad278b.png)

After:

![after screenshot](https://user-images.githubusercontent.com/6820/47889756-cae65f00-de08-11e8-99c1-acfc6e7cb90c.png)

packages/jest-message-util/src/__tests__/__snapshots__/messages.test.js.snap

@@ -22,6 +22,22 @@ exports[`formatStackTrace should strip node internals 1`] = `
 "
 `;
 
+exports[`retains message in babel code frame error 1`] = `
+"<bold><red>  <bold>● <bold>Babel test</></>
+
+      
+        packages/react/src/forwardRef.js: Unexpected token, expected , (20:10)
+<dim></>
+<dim>          </> <gray> 18 | </>        <cyan>false</><yellow>,</></>
+<dim>           <gray> 19 | </>        <green>'forwardRef requires a render function but received a \`memo\` '</> </>
+<dim>          <red><bold>><dim></><gray> 20 | </>          <green>'component. Instead of forwardRef(memo(...)), use '</> <yellow>+</></>
+<dim>           <gray>    | </>          <red><bold>^<dim></></>
+<dim>           <gray> 21 | </>          <green>'memo(forwardRef(...)).'</><yellow>,</></>
+<dim>           <gray> 22 | </>      )<yellow>;</></>
+<dim>           <gray> 23 | </>    } <cyan>else</> <cyan>if</> (<cyan>typeof</> render <yellow>!==</> <green>'function'</>) {</></>
+"
+`;
+
 exports[`should exclude jasmine from stack trace for Unix paths. 1`] = `
 "<bold><red>  <bold>● <bold>Unix test</></>
 

packages/jest-message-util/src/__tests__/messages.test.js

@@ -58,6 +58,19 @@ const vendorStack =
       at Object.asyncFn (__tests__/vendor/sulu/node_modules/sulu-content-bundle/best_component.js:1:5)
 `;
 
+const babelStack =
+  '  ' +
+  `
+    packages/react/src/forwardRef.js: Unexpected token, expected , (20:10)
+    \u001b[0m \u001b[90m 18 | \u001b[39m        \u001b[36mfalse\u001b[39m\u001b[33m,\u001b[39m
+     \u001b[90m 19 | \u001b[39m        \u001b[32m'forwardRef requires a render function but received a \`memo\` '\u001b[39m 
+    \u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 20 | \u001b[39m          \u001b[32m'component. Instead of forwardRef(memo(...)), use '\u001b[39m \u001b[33m+\u001b[39m
+     \u001b[90m    | \u001b[39m          \u001b[31m\u001b[1m^\u001b[22m\u001b[39m
+     \u001b[90m 21 | \u001b[39m          \u001b[32m'memo(forwardRef(...)).'\u001b[39m\u001b[33m,\u001b[39m
+     \u001b[90m 22 | \u001b[39m      )\u001b[33m;\u001b[39m
+     \u001b[90m 23 | \u001b[39m    } \u001b[36melse\u001b[39m \u001b[36mif\u001b[39m (\u001b[36mtypeof\u001b[39m render \u001b[33m!==\u001b[39m \u001b[32m'function'\u001b[39m) {\u001b[0m
+`;
+
 it('should exclude jasmine from stack trace for Unix paths.', () => {
   const messages = formatResultsErrors(
     [
@@ -134,3 +147,23 @@ it('should not exclude vendor from stack trace', () => {
 
   expect(messages).toMatchSnapshot();
 });
+
+it('retains message in babel code frame error', () => {
+  const messages = formatResultsErrors(
+    [
+      {
+        ancestorTitles: [],
+        failureMessages: [babelStack],
+        title: 'Babel test',
+      },
+    ],
+    {
+      rootDir: '',
+    },
+    {
+      noStackTrace: false,
+    },
+  );
+
+  expect(messages).toMatchSnapshot();
+});

packages/jest-message-util/src/index.js

@@ -62,7 +62,6 @@ const TITLE_BULLET = chalk.bold('\u25cf ');
 const STACK_TRACE_COLOR = chalk.dim;
 const STACK_PATH_REGEXP = /\s*at.*\(?(\:\d*\:\d*|native)\)?/;
 const EXEC_ERROR_MESSAGE = 'Test suite failed to run';
-const ERROR_TEXT = 'Error: ';
 const NOT_EMPTY_LINE_REGEXP = /^(?!$)/gm;
 
 const indentAllLines = (lines: string, indent: string) =>
@@ -335,13 +334,14 @@ export const separateMessageFromStack = (content: string) => {
     return {message: '', stack: ''};
   }
 
-  const messageMatch = content.match(/(^(.|\n)*?(?=\n\s*at\s.*\:\d*\:\d*))/);
-  let message = messageMatch ? messageMatch[0] : 'Error';
-  const stack = messageMatch ? content.slice(message.length) : content;
-  // If the error is a plain error instead of a SyntaxError or TypeError
-  // we remove it from the message because it is generally not useful.
-  if (message.startsWith(ERROR_TEXT)) {
-    message = message.substr(ERROR_TEXT.length);
-  }
+  // All lines up to what looks like a stack -- or if nothing looks like a stack
+  // (maybe it's a code frame instead), just the first non-empty line.
+  // If the error is a plain "Error:" instead of a SyntaxError or TypeError we
+  // remove the prefix from the message because it is generally not useful.
+  const messageMatch = content.match(
+    /^(?:Error: )?([\s\S]*?(?=\n\s*at\s.*\:\d*\:\d*)|\s*.*)([\s\S]*)$/
+  );
+  const message = messageMatch[1];
+  const stack = messageMatch[2];
   return {message, stack};
 };