[test] Use new Redbox matchers in pages/ gssp-ssr-change-reloading (#76788)

Author: eps1lon

test/development/basic/gssp-ssr-change-reloading/test/index.test.ts

@@ -3,12 +3,7 @@
 import { join } from 'path'
 import webdriver from 'next-webdriver'
 import { createNext, FileRef } from 'e2e-utils'
-import {
-  assertHasRedbox,
-  assertNoRedbox,
-  check,
-  getRedboxHeader,
-} from 'next-test-utils'
+import { assertNoRedbox, check } from 'next-test-utils'
 import { NextInstance } from 'e2e-utils'
 
 const installCheckVisible = (browser) => {
@@ -276,10 +271,22 @@ describe('GS(S)P Server-Side Change Reloading', () => {
 
     try {
       await next.patchFile(page, originalContent.replace('props:', 'propss:'))
-      await assertHasRedbox(browser)
-      expect(await getRedboxHeader(browser)).toContain(
-        'Additional keys were returned from'
-      )
+
+      await expect(browser).toDisplayRedbox(`
+       {
+         "count": 1,
+         "description": "Error: Additional keys were returned from \`getStaticProps\`. Properties intended for your component must be nested under the \`props\` key, e.g.:
+
+       	return { props: { title: 'My Title', content: '...' } }
+
+       Keys that need to be moved: propss.
+       Read more: https://nextjs.org/docs/messages/invalid-getstaticprops-value",
+         "environmentLabel": null,
+         "label": "Runtime Error",
+         "source": null,
+         "stack": [],
+       }
+      `)
 
       await next.patchFile(page, originalContent)
       await assertNoRedbox(browser)
@@ -306,8 +313,22 @@ describe('GS(S)P Server-Side Change Reloading', () => {
           'throw new Error("custom oops"); const count'
         )
       )
-      await assertHasRedbox(browser)
-      expect(await getRedboxHeader(browser)).toContain('custom oops')
+
+      await expect(browser).toDisplayRedbox(`
+       {
+         "count": 1,
+         "description": "Error: custom oops",
+         "environmentLabel": null,
+         "label": "Runtime Error",
+         "source": "pages/index.js (18:9) @ getStaticProps
+       > 18 |   throw new Error("custom oops"); const count = 1
+            |         ^",
+         "stack": [
+           "getStaticProps pages/index.js (18:9)",
+         ],
+       }
+      `)
+      expect(next.cliOutput).toMatch(/custom oops/)
 
       await next.patchFile(page, originalContent)
       await assertNoRedbox(browser)

test/e2e/prerender.test.ts

@@ -1152,28 +1152,6 @@ describe('Prerender', () => {
         expect(JSON.parse($2('#__NEXT_DATA__').text()).isFallback).toBe(false)
       })
 
-      it('should log error in console and browser in development mode', async () => {
-        const browser = await webdriver(next.url, '/')
-        expect(await browser.elementByCss('p').text()).toMatch(/hello.*?world/)
-
-        await next.patchFile(
-          'pages/index.js',
-          (content) => content.replace('// throw new', 'throw new'),
-          async () => {
-            // we need to reload the page to trigger getStaticProps
-            await browser.refresh()
-
-            return retry(async () => {
-              await assertHasRedbox(browser)
-              const errOverlayContent = await getRedboxHeader(browser)
-              const errorMsg = /oops from getStaticProps/
-              expect(next.cliOutput).toMatch(errorMsg)
-              expect(errOverlayContent).toMatch(errorMsg)
-            })
-          }
-        )
-      })
-
       it('should always call getStaticProps without caching in dev', async () => {
         const initialRes = await fetchViaHTTP(next.url, '/something')
         expect(isCachingHeader(initialRes.headers.get('cache-control'))).toBe(

test/e2e/prerender/pages/index.js

@@ -1,7 +1,6 @@
 import Link from 'next/link'
 
 export async function getStaticProps() {
-  // throw new Error('oops from getStaticProps')
   return {
     props: { world: 'world', time: new Date().getTime() },
     // bad-prop