test: fix snapshots in failing tests (#79254)

Author: lubieowoce

test/development/acceptance-app/error-recovery.test.ts

@@ -1,7 +1,14 @@
 /* eslint-env jest */
 import { createSandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
-import { check } from 'next-test-utils'
+import {
+  assertHasRedbox,
+  check,
+  getRedboxCallStack,
+  getRedboxDescription,
+  getRedboxEnvironmentLabel,
+  getRedboxSource,
+} from 'next-test-utils'
 import path from 'path'
 import { outdent } from 'outdent'
 
@@ -375,20 +382,55 @@ describe('Error recovery app', () => {
         `
     )
 
-    await expect(browser).toDisplayRedbox(`
-     {
-       "description": "oops",
-       "environmentLabel": "Server",
-       "label": "Runtime Error",
-       "source": "child.js (3:9) @ Child
-     > 3 |   throw new Error('oops')
-         |         ^",
-       "stack": [
-         "Child child.js (3:9)",
-         "Page app/server/page.js (3:10)",
-       ],
-     }
-    `)
+    {
+      // FIXME: `label` is flaking between "Runtime Error" and "Recoverable Error",
+      // so we have to snapshot the redbox manually we figure out why
+
+      // await expect(browser).toDisplayRedbox(`
+      //  {
+      //    "description": "oops",
+      //    "environmentLabel": "Server",
+      //    "label": "Recoverable Error",
+      //    "source": "child.js (3:9) @ Child
+      //  > 3 |   throw new Error('oops')
+      //      |         ^",
+      //    "stack": [
+      //      "Child child.js (3:9)",
+      //      "Page app/server/page.js (3:10)",
+      //    ],
+      //  }
+      // `)
+
+      await assertHasRedbox(browser)
+      const redbox = await Promise.all([
+        getRedboxDescription(browser),
+        getRedboxEnvironmentLabel(browser),
+        getRedboxSource(browser),
+        getRedboxCallStack(browser),
+      ]).then(([description, environmentLabel, source, stack]) => ({
+        description,
+        environmentLabel,
+        source,
+        stack,
+      }))
+      expect(redbox).toMatchInlineSnapshot(`
+      {
+        "description": "oops",
+        "environmentLabel": "Server",
+        "source": "child.js (3:9) @ Child
+
+        1 | // hello
+        2 | export default function Child() {
+      > 3 |   throw new Error('oops')
+          |         ^
+        4 | }",
+        "stack": [
+          "Child child.js (3:9)",
+          "Page app/server/page.js (3:10)",
+        ],
+      }
+      `)
+    }
 
     // TODO-APP: re-enable when error recovery doesn't reload the page.
     /* const didNotReload = */ await session.patch(
@@ -580,10 +622,10 @@ describe('Error recovery app', () => {
          "description": "Parsing ecmascript source code failed",
          "environmentLabel": null,
          "label": "Build Error",
-         "source": "./index.js (7:41)
+         "source": "./index.js (10:41)
        Parsing ecmascript source code failed
-       > 7 | export default function FunctionNamed() {
-           |                                         ^",
+       > 10 | export default function FunctionNamed() {
+            |                                         ^",
          "stack": [],
        }
       `)
@@ -617,10 +659,10 @@ describe('Error recovery app', () => {
          "description": "Parsing ecmascript source code failed",
          "environmentLabel": null,
          "label": "Build Error",
-         "source": "./index.js (7:41)
+         "source": "./index.js (10:41)
        Parsing ecmascript source code failed
-       > 7 | export default function FunctionNamed() {
-           |                                         ^",
+       > 10 | export default function FunctionNamed() {
+            |                                         ^",
          "stack": [],
        }
       `)

test/development/app-dir/use-cache-errors/use-cache-errors.test.ts

@@ -5,6 +5,7 @@ describe('use-cache-errors', () => {
   const { next, isTurbopack } = nextTestSetup({
     files: __dirname,
   })
+  const isRspack = Boolean(process.env.NEXT_RSPACK)
 
   it('should not show a false-positive compiler error about a misplaced "use cache" directive', async () => {
     // This is a regression test to ensure that an injected React Refresh
@@ -35,6 +36,21 @@ describe('use-cache-errors', () => {
          ],
        }
       `)
+    } else if (isRspack) {
+      // TODO: the source is missing and the stack leaks rspack internals
+      await expect(browser).toDisplayRedbox(`
+       {
+         "description": "Attempted to call useStuff() from the server but useStuff is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
+         "environmentLabel": "Cache",
+         "label": "Runtime Error",
+         "source": null,
+         "stack": [
+           "<FIXME-file-protocol>",
+           "useCachedStuff rsc:/Cache/webpack-internal:///(action-browser)/app/module-with-use-cache.ts (25:68)",
+           "Page ./app/page.tsx",
+         ],
+       }
+      `)
     } else {
       await expect(browser).toDisplayRedbox(`
        {