feat(test-runner): filter out syntax error stack traces (#12095)

Filter out long stack traces from babel when it fails compilation
due to syntax error in test.

packages/playwright-test/src/transform.ts

@@ -189,27 +189,33 @@ export function transformHook(code: string, filename: string, isModule = false):
   if (hasPreprocessor)
     plugins.push([scriptPreprocessor]);
 
-  const result = babel.transformFileSync(filename, {
+  try {
-    babelrc: false,
+    const result = babel.transformFileSync(filename, {
-    configFile: false,
+      babelrc: false,
-    assumptions: {
+      configFile: false,
-      // Without this, babel defines a top level function that
+      assumptions: {
-      // breaks playwright evaluates.
+        // Without this, babel defines a top level function that
-      setPublicClassFields: true,
+        // breaks playwright evaluates.
-    },
+        setPublicClassFields: true,
-    presets: [
+      },
-      [require.resolve('@babel/preset-typescript'), { onlyRemoveTypeImports: true }],
+      presets: [
-    ],
+        [require.resolve('@babel/preset-typescript'), { onlyRemoveTypeImports: true }],
-    plugins,
+      ],
-    sourceMaps: 'both',
+      plugins,
-  } as babel.TransformOptions)!;
+      sourceMaps: 'both',
-  if (result.code) {
+    } as babel.TransformOptions)!;
-    fs.mkdirSync(path.dirname(cachePath), { recursive: true });
+    if (result.code) {
-    if (result.map)
+      fs.mkdirSync(path.dirname(cachePath), { recursive: true });
-      fs.writeFileSync(sourceMapPath, JSON.stringify(result.map), 'utf8');
+      if (result.map)
-    fs.writeFileSync(codePath, result.code, 'utf8');
+        fs.writeFileSync(sourceMapPath, JSON.stringify(result.map), 'utf8');
+      fs.writeFileSync(codePath, result.code, 'utf8');
+    }
+    return result.code || '';
+  } catch (e) {
+    // Re-throw error with a playwright-test stack
+    // that could be filtered out.
+    throw new Error(e.message);
   }
-  return result.code || '';
 }
 
 export function installTransform(): () => void {

packages/playwright-test/src/util.ts

@@ -47,7 +47,10 @@ function filterStackTrace(e: Error) {
       const functionName = callSite.getFunctionName() || undefined;
       if (!fileName)
         return true;
-      return !fileName.startsWith(PLAYWRIGHT_TEST_PATH) && !fileName.startsWith(PLAYWRIGHT_CORE_PATH) && !fileName.startsWith(EXPECT_PATH) && !isInternalFileName(fileName, functionName);
+      return !fileName.startsWith(PLAYWRIGHT_TEST_PATH) &&
+             !fileName.startsWith(PLAYWRIGHT_CORE_PATH) &&
+             !fileName.startsWith(EXPECT_PATH) &&
+             !isInternalFileName(fileName, functionName);
     }));
   };
   // eslint-disable-next-line

tests/playwright-test/loader.spec.ts

@@ -314,6 +314,21 @@ test('should filter out event emitter from stack traces', async ({ runInlineTest
   expect(outputWithoutGoodStackFrames).not.toContain('EventEmitter.emit');
 });
 
+test('should filter out syntax error stack traces', async ({ runInlineTest }, testInfo) => {
+  const result = await runInlineTest({
+    'expect-test.spec.ts': `
+      const { test } = pwt;
+      test('should work', ({}) => {
+        // syntax error: cannot have await in non-async function
+        await Proimse.resolve();
+      });
+    `
+  });
+  expect(result.exitCode).toBe(1);
+  expect(stripAnsi(result.output)).not.toContain('babel');
+  expect(stripAnsi(result.output)).not.toContain('    at ');
+});
+
 test('should filter stack trace for raw errors', async ({ runInlineTest }) => {
   const result = await runInlineTest({
     'expect-test.spec.ts': `