Add internal toDisplayRedbox and toDisplayCollapsedRedbox inline …

…snapshot matchers

These are meant to replace `assertHasRedbox` over time.
We want that every redbox insertion in the future asserts on the full error (message, stack, codeframe) in both browser
and terminal.

We'll slowly expand usage of these matchers until all use cases are covered at which point the old, granular helpers are removed.

The end goal is full confidence in our error display without sacrificing DX for people focused on the error message itself.

The downside of inline snapshot matcher that we can't have fine-grained TODO comments.
But that's only a concern for the few working on working on the error display infra.
The goal here is to encourage using these helpers so the priorities of the few working on error infra is lowest.

The most annoying fact is the need for forking assertions between Turbopack and Webpack.
All the more reason for us to fix the off-by-one column issues between Turbopack and Webpack.

package.json

@@ -154,6 +154,7 @@
     "eslint-v8": "npm:eslint@^8.57.0",
     "event-stream": "4.0.1",
     "execa": "2.0.3",
+    "expect": "29.7.0",
     "expect-type": "0.14.2",
     "express": "4.17.0",
     "faker": "5.5.3",
@@ -176,6 +177,7 @@
     "jest-environment-jsdom": "29.7.0",
     "jest-extended": "4.0.2",
     "jest-junit": "16.0.0",
+    "jest-snapshot": "30.0.0-alpha.6",
     "json5": "2.2.3",
     "kleur": "^4.1.0",
     "ky": "0.19.1",

test/development/acceptance/ReactRefreshLogBox.test.ts

@@ -3,13 +3,13 @@ import { createSandbox } from 'development-sandbox'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import {
   describeVariants as describe,
-  getRedboxCallStack,
   toggleCollapseCallStackFrames,
 } from 'next-test-utils'
 import path from 'path'
 import { outdent } from 'outdent'
 
-describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
+describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', (mode) => {
+  const isTurbopack = mode === 'turbo'
   const { next } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
     skipStart: true,
@@ -786,10 +786,38 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => {
         ],
       ])
     )
-    const { session, browser } = sandbox
-    await session.assertHasRedbox()
-    const texts = await getRedboxCallStack(browser)
-    expect(texts).toMatchSnapshot()
+    const { browser } = sandbox
+    if (isTurbopack) {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "count": 1,
+         "description": "Error: anonymous error!",
+         "source": "pages/index.js (3:11) @ <unknown>
+       > 3 |     throw new Error("anonymous error!");
+           |           ^",
+         "stack": [
+           "Array.map <anonymous> (0:0)",
+           "Page pages/index.js (2:13)",
+         ],
+         "title": "Server Error",
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "count": 1,
+         "description": "Error: anonymous error!",
+         "source": "pages/index.js (3:11) @ eval
+       > 3 |     throw new Error("anonymous error!");
+           |           ^",
+         "stack": [
+           "Array.map <anonymous> (0:0)",
+           "map pages/index.js (2:13)",
+         ],
+         "title": "Server Error",
+       }
+      `)
+    }
   })
 
   test('should hide unrelated frames in stack trace with node:internal calls', async () => {