Skip to content

Commit

Permalink
Improve message/stack parsing for Babel code frame errors
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
sophiebits committed Nov 2, 2018
1 parent 223c3db commit 0f0b86a
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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</></>
Expand Down
33 changes: 33 additions & 0 deletions packages/jest-message-util/src/__tests__/messages.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(
[
Expand Down Expand Up @@ -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();
});
18 changes: 9 additions & 9 deletions packages/jest-message-util/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down Expand Up @@ -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};
};

0 comments on commit 0f0b86a

Please sign in to comment.