diff --git a/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts b/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts index d3330e063c3d8d..8faea46882e64e 100644 --- a/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts +++ b/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts @@ -194,7 +194,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => { ]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) const source = await session.getRedboxSource() if (process.env.TURBOPACK) { diff --git a/test/development/acceptance-app/ReactRefreshRegression.test.ts b/test/development/acceptance-app/ReactRefreshRegression.test.ts index 74b0263d0ef627..c061193e920dc8 100644 --- a/test/development/acceptance-app/ReactRefreshRegression.test.ts +++ b/test/development/acceptance-app/ReactRefreshRegression.test.ts @@ -277,7 +277,7 @@ describe('ReactRefreshRegression app', () => { `export default function () { throw new Error('boom'); }` ) - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) const source = await session.getRedboxSource() expect(source.split(/\r?\n/g).slice(2).join('\n')).toMatchInlineSnapshot(` @@ -295,7 +295,7 @@ describe('ReactRefreshRegression app', () => { `export default function Page() { throw new Error('boom'); }` ) - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) const source = await session.getRedboxSource() expect(source.split(/\r?\n/g).slice(2).join('\n')).toMatchInlineSnapshot(` diff --git a/test/development/acceptance-app/app-hmr-changes.test.ts b/test/development/acceptance-app/app-hmr-changes.test.ts index f4f44f7aa7196a..acc383622b419c 100644 --- a/test/development/acceptance-app/app-hmr-changes.test.ts +++ b/test/development/acceptance-app/app-hmr-changes.test.ts @@ -51,6 +51,8 @@ describe('Error overlay - RSC build errors', () => { await session.patch(pagePath, break2.replace('break 3', '')) await session.patch(pagePath, break2) + // TODO: remove + console.log({ i }) await session.assertHasRedbox() await session.patch(pagePath, break1) diff --git a/test/development/acceptance-app/dynamic-error.test.ts b/test/development/acceptance-app/dynamic-error.test.ts index b1217f3708fb04..b5ff2d98aed93b 100644 --- a/test/development/acceptance-app/dynamic-error.test.ts +++ b/test/development/acceptance-app/dynamic-error.test.ts @@ -30,7 +30,9 @@ describe('dynamic = "error" in devmode', () => { '/server' ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await session.getRedboxDescription()).toMatchInlineSnapshot( `"[ Server ] Error: Route /server with \`dynamic = "error"\` couldn't be rendered statically because it used \`cookies\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering"` ) diff --git a/test/development/acceptance-app/rsc-runtime-errors.test.ts b/test/development/acceptance-app/rsc-runtime-errors.test.ts index 6967135a3b7eea..63b1eb7989495f 100644 --- a/test/development/acceptance-app/rsc-runtime-errors.test.ts +++ b/test/development/acceptance-app/rsc-runtime-errors.test.ts @@ -27,7 +27,9 @@ describe('Error overlay - RSC runtime errors', () => { const browser = await next.browser('/server') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const errorDescription = await getRedboxDescription(browser) expect(errorDescription).toContain( @@ -69,7 +71,9 @@ describe('Error overlay - RSC runtime errors', () => { ) const browser = await next.browser('/server') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const errorDescription = await getRedboxDescription(browser) @@ -87,7 +91,9 @@ describe('Error overlay - RSC runtime errors', () => { ` ) const browser = await next.browser('/server') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const source = await getRedboxSource(browser) // Can show the original source code @@ -106,7 +112,9 @@ describe('Error overlay - RSC runtime errors', () => { ) const browser = await next.browser('/server') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const versionText = await getVersionCheckerText(browser) expect(versionText).toMatch(/Next.js \([\w.-]+\)/) }) @@ -122,7 +130,9 @@ describe('Error overlay - RSC runtime errors', () => { ) const browser = await next.browser('/server') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const source = await getRedboxSource(browser) expect(source).toContain('app/server/page.js') expect(source).not.toContain('//app/server/page.js') diff --git a/test/development/acceptance-app/server-components.test.ts b/test/development/acceptance-app/server-components.test.ts index 651742284b2454..c99a3598d6f84e 100644 --- a/test/development/acceptance-app/server-components.test.ts +++ b/test/development/acceptance-app/server-components.test.ts @@ -520,7 +520,7 @@ describe('Error Overlay for server components', () => { ]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) // In webpack when the message too long it gets truncated with ` | ` with new lines. // So we need to check for the first part of the message. const normalizedSource = await session.getRedboxSource() diff --git a/test/development/acceptance-app/undefined-default-export.test.ts b/test/development/acceptance-app/undefined-default-export.test.ts index a4e2382c234319..2dd36a87d9dcf7 100644 --- a/test/development/acceptance-app/undefined-default-export.test.ts +++ b/test/development/acceptance-app/undefined-default-export.test.ts @@ -17,7 +17,10 @@ describe('Undefined default export', () => { '/specific-path/server' ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + // TODO: Unclear why the test is navigating to the page twice + pageResponseCode: [500, 500], + }) expect(await session.getRedboxDescription()).toInclude( 'The default export is not a React Component in "/specific-path/server/page"' ) @@ -39,7 +42,9 @@ describe('Undefined default export', () => { '/will-not-found' ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + pageResponseCode: 500, + }) expect(await session.getRedboxDescription()).toInclude( 'The default export is not a React Component in "/will-not-found/not-found"' ) @@ -55,7 +60,10 @@ describe('Undefined default export', () => { // Wait for the DOM node #__next to be present await browser.waitForElementByCss('#__next') - await session.assertHasRedbox() + await session.assertHasRedbox({ + // TODO: really? + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await session.getRedboxDescription()).toInclude( 'The default export is not a React Component in "/page"' ) @@ -73,7 +81,9 @@ describe('Undefined default export', () => { '/server-with-errors/page-export-initial-error' ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + pageResponseCode: 500, + }) expect(await session.getRedboxDescription()).toInclude( 'The default export is not a React Component in "/server-with-errors/page-export-initial-error/page"' ) diff --git a/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts b/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts index 4ef70e4735856c..066c7f6e7ad560 100644 --- a/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts @@ -18,7 +18,9 @@ describe.each(['default', 'turbo'])( new Map([['pages/_app.js', ``]]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + pageResponseCode: 500, + }) expect(await session.getRedboxDescription()).toMatchInlineSnapshot( `"Error: The default export is not a React Component in page: "/_app""` ) @@ -41,7 +43,9 @@ describe.each(['default', 'turbo'])( new Map([['pages/_document.js', ``]]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + pageResponseCode: 500, + }) expect(await session.getRedboxDescription()).toMatchInlineSnapshot( `"Error: The default export is not a React Component in page: "/_document""` ) @@ -92,7 +96,9 @@ describe.each(['default', 'turbo'])( ]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + pageResponseCode: 500, + }) const content = await session.getRedboxSource() const source = next.normalizeTestDirContent(content) if (process.env.TURBOPACK) { @@ -178,7 +184,9 @@ describe.each(['default', 'turbo'])( ]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ + pageResponseCode: 500, + }) const source = next.normalizeTestDirContent( await session.getRedboxSource() ) diff --git a/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts b/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts index 0d6da34e0550a1..ca5f1a70b8c204 100644 --- a/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts @@ -198,7 +198,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => { ]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) const source = await session.getRedboxSource() if (process.env.TURBOPACK) { diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts index 5fd619a9611c6e..cdcd495a9d29a4 100644 --- a/test/development/acceptance/ReactRefreshLogBox.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox.test.ts @@ -80,7 +80,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => { ` ) - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) expect(await session.getRedboxSource()).toMatchSnapshot() }) @@ -644,7 +644,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => { ` ) - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) expect(await session.getRedboxDescription()).toMatchInlineSnapshot( `"Error: {"a":1,"b":"x"}"` ) @@ -792,7 +792,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => { ]) ) const { session, browser } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) let callStackFrames = await browser.elementsByCss( '[data-nextjs-call-stack-frame]' ) @@ -820,7 +820,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox %s', () => { ]) ) const { session, browser } = sandbox - await session.assertHasRedbox() + await session.assertHasRedbox({ pageResponseCode: 500 }) // Should still show the errored line in source code const source = await session.getRedboxSource() diff --git a/test/development/acceptance/ReactRefreshRegression.test.ts b/test/development/acceptance/ReactRefreshRegression.test.ts index 14f8ffa70f375d..157276152be128 100644 --- a/test/development/acceptance/ReactRefreshRegression.test.ts +++ b/test/development/acceptance/ReactRefreshRegression.test.ts @@ -281,7 +281,11 @@ describe('ReactRefreshRegression', () => { ) expect(didNotReload).toBe(false) - await session.assertHasRedbox() + await session.assertHasRedbox({ + pageResponseCode: + // TODO: Unclear why the test is navigating to the page twice + [500, 500], + }) const source = await session.getRedboxSource() expect(source.split(/\r?\n/g).slice(2).join('\n')).toMatchInlineSnapshot(` diff --git a/test/development/app-dir/dynamic-error-trace/index.test.ts b/test/development/app-dir/dynamic-error-trace/index.test.ts index 7208f5dcc521fe..6d35c95d0275e3 100644 --- a/test/development/app-dir/dynamic-error-trace/index.test.ts +++ b/test/development/app-dir/dynamic-error-trace/index.test.ts @@ -18,7 +18,9 @@ describe('app dir - dynamic error trace', () => { it('should show the error trace', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) await expect( browser.hasElementByCssSelector( diff --git a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts index 6f4a86bae411b9..955801591f0bc4 100644 --- a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts +++ b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts @@ -94,7 +94,7 @@ describe('Dynamic IO Dev Errors', () => { ]) ) const { browser, session } = sandbox - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/development/app-dir/next-after-app-invalid-usage/index.test.ts b/test/development/app-dir/next-after-app-invalid-usage/index.test.ts index 18f9cfd634f446..68a112b9d4eca7 100644 --- a/test/development/app-dir/next-after-app-invalid-usage/index.test.ts +++ b/test/development/app-dir/next-after-app-invalid-usage/index.test.ts @@ -29,7 +29,7 @@ describe('unstable_after() - invalid usages', () => { it('errors at compile time when used in a client module', async () => { const session = await next.browser('/invalid-in-client') - await assertHasRedbox(session) + await assertHasRedbox(session, { pageResponseCode: 500 }) expect(await getRedboxSource(session)).toMatch( /You're importing a component that needs "?unstable_after"?\. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component\./ ) diff --git a/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts b/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts index 0368a1d958faef..3aad381c91485e 100644 --- a/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts +++ b/test/development/app-dir/owner-stack-invalid-element-type/invalid-element-type.test.ts @@ -59,7 +59,9 @@ const isOwnerStackEnabled = it('should catch invalid element from a rsc component', async () => { const browser = await next.browser('/rsc') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + }) const stackFramesContent = await getStackFramesContent(browser) const source = await getRedboxSource(browser) @@ -96,7 +98,9 @@ const isOwnerStackEnabled = it('should catch invalid element from on ssr client component', async () => { const browser = await next.browser('/ssr') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + }) const stackFramesContent = await getStackFramesContent(browser) const source = await getRedboxSource(browser) diff --git a/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts b/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts index 83778742851a27..968769f71b589c 100644 --- a/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts +++ b/test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts @@ -64,7 +64,9 @@ const isOwnerStackEnabled = it('should catch invalid element from a rsc component', async () => { const browser = await next.browser('/rsc') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const stackFramesContent = await getStackFramesContent(browser) const source = await getRedboxSource(browser) @@ -106,7 +108,9 @@ const isOwnerStackEnabled = it('should catch invalid element from on ssr client component', async () => { const browser = await next.browser('/ssr') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const stackFramesContent = await getStackFramesContent(browser) const source = await getRedboxSource(browser) diff --git a/test/development/app-dir/owner-stack/owner-stack.test.ts b/test/development/app-dir/owner-stack/owner-stack.test.ts index 40ed60a7b49014..0eac39c40c0e14 100644 --- a/test/development/app-dir/owner-stack/owner-stack.test.ts +++ b/test/development/app-dir/owner-stack/owner-stack.test.ts @@ -166,7 +166,7 @@ describe('app-dir - owner-stack', () => { it('should log stitched error for SSR errors', async () => { const browser = await next.browser('/ssr') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const stackFramesContent = await getStackFramesContent(browser) if (process.env.TURBOPACK) { diff --git a/test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts b/test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts index d284ed60dc620f..88789c86bbdcaa 100644 --- a/test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts +++ b/test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts @@ -12,7 +12,7 @@ describe('serialize-circular-error', () => { it('should serialize the object from server component in console correctly', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const description = await getRedboxDescription(browser) // React cannot serialize thrown objects with circular references diff --git a/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts b/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts index 39418cc33f11ea..ebf92a8674d86d 100644 --- a/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts +++ b/test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts @@ -12,7 +12,7 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => { it('should error when use dynamic ssr:false in server component', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts b/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts index 360b1b920b2861..e045fe49c4d740 100644 --- a/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts +++ b/test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts @@ -265,7 +265,7 @@ describe('react-dom/server in React Server environment', () => { ) if (isTurbopack) { - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) } else { // FIXME: why no redbox when there is an error? await assertNoRedbox(browser) @@ -312,7 +312,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/app-code/react-dom-server-node-explicit' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -369,7 +369,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/app-code/react-dom-server-node-implicit' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -425,7 +425,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-browser-explicit' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -723,7 +723,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-node-explicit' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -780,7 +780,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-node-implicit' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/development/basic/gssp-ssr-change-reloading/test/index.test.ts b/test/development/basic/gssp-ssr-change-reloading/test/index.test.ts index 59fbac9c3094b4..1e222197d02b9f 100644 --- a/test/development/basic/gssp-ssr-change-reloading/test/index.test.ts +++ b/test/development/basic/gssp-ssr-change-reloading/test/index.test.ts @@ -276,7 +276,8 @@ describe('GS(S)P Server-Side Change Reloading', () => { try { await next.patchFile(page, originalContent.replace('props:', 'propss:')) - await assertHasRedbox(browser) + // TODO: Unclear why two page navigations are triggered + await assertHasRedbox(browser, { pageResponseCode: [500, 500] }) expect(await getRedboxHeader(browser)).toContain( 'Additional keys were returned from' ) @@ -306,7 +307,8 @@ describe('GS(S)P Server-Side Change Reloading', () => { 'throw new Error("custom oops"); const count' ) ) - await assertHasRedbox(browser) + // TODO: Unclear why two page navigations are triggered + await assertHasRedbox(browser, { pageResponseCode: [500, 500] }) expect(await getRedboxHeader(browser)).toContain('custom oops') await next.patchFile(page, originalContent) diff --git a/test/development/middleware-errors/index.test.ts b/test/development/middleware-errors/index.test.ts index 678d9f13c5cfa4..e2df511b0841b7 100644 --- a/test/development/middleware-errors/index.test.ts +++ b/test/development/middleware-errors/index.test.ts @@ -54,7 +54,7 @@ describe('middleware - development errors', () => { it('renders the error correctly and recovers', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) await next.patchFile('middleware.js', `export default function () {}`) await assertNoRedbox(browser) }) @@ -158,7 +158,7 @@ describe('middleware - development errors', () => { it('renders the error correctly and recovers', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const lengthOfLogs = next.cliOutput.length @@ -210,7 +210,7 @@ describe('middleware - development errors', () => { it('renders the error correctly and recovers', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const source = await getRedboxSource(browser) expect(source).toContain(`throw new Error('booooom!')`) expect(source).toContain('middleware.js') @@ -315,7 +315,7 @@ describe('middleware - development errors', () => { it('renders the error correctly and recovers', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect( await browser.elementByCss('#nextjs__container_errors_desc').text() ).toEqual('Failed to compile') diff --git a/test/development/next-font/font-loader-in-document-error.test.ts b/test/development/next-font/font-loader-in-document-error.test.ts index 54f507ccf70458..45b294e5ce9412 100644 --- a/test/development/next-font/font-loader-in-document-error.test.ts +++ b/test/development/next-font/font-loader-in-document-error.test.ts @@ -18,7 +18,7 @@ describe('font-loader-in-document-error', () => { test('next/font inside _document', async () => { const browser = await webdriver(next.url, '/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) if (process.env.TURBOPACK) { // TODO: Turbopack doesn't include pages/ expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` diff --git a/test/development/pages-dir/client-navigation/rendering.test.ts b/test/development/pages-dir/client-navigation/rendering.test.ts index c6325a8bd727ff..843b2044b7aaa1 100644 --- a/test/development/pages-dir/client-navigation/rendering.test.ts +++ b/test/development/pages-dir/client-navigation/rendering.test.ts @@ -135,7 +135,7 @@ describe('Client Navigation rendering', () => { const expectedErrorMessage = 'Circular structure in "getInitialProps" result of page "/circular-json-error".' - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const text = await getRedboxHeader(browser) expect(text).toContain(expectedErrorMessage) }) @@ -149,17 +149,17 @@ describe('Client Navigation rendering', () => { const expectedErrorMessage = '"InstanceInitialPropsPage.getInitialProps()" is defined as an instance method - visit https://nextjs.org/docs/messages/get-initial-props-as-an-instance-method for more information.' - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const text = await getRedboxHeader(browser) expect(text).toContain(expectedErrorMessage) }) - test('getInitialProps resolves to null', async () => { + it('getInitialProps resolves to null', async () => { const browser = await webdriver(next.appPort, '/empty-get-initial-props') const expectedErrorMessage = '"EmptyInitialPropsPage.getInitialProps()" should resolve to an object. But found "null" instead.' - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const text = await getRedboxHeader(browser) expect(text).toContain(expectedErrorMessage) }) @@ -195,14 +195,14 @@ describe('Client Navigation rendering', () => { test('default export is not a React Component', async () => { const browser = await webdriver(next.appPort, '/no-default-export') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const text = await getRedboxHeader(browser) expect(text).toMatch(/The default export is not a React Component/) }) test('error-inside-page', async () => { const browser = await webdriver(next.appPort, '/error-inside-page') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const text = await getRedboxHeader(browser) expect(text).toMatch(/This is an expected error/) // Sourcemaps are applied by react-error-overlay, so we can't check them on SSR. @@ -213,7 +213,7 @@ describe('Client Navigation rendering', () => { next.appPort, '/error-in-the-global-scope' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const text = await getRedboxHeader(browser) expect(text).toMatch(/aa is not defined/) // Sourcemaps are applied by react-error-overlay, so we can't check them on SSR. @@ -313,7 +313,7 @@ describe('Client Navigation rendering', () => { it('should show a valid error when undefined is thrown', async () => { const browser = await webdriver(next.appPort, '/throw-undefined') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const text = await getRedboxHeader(browser) expect(text).toContain( diff --git a/test/development/sass-error/index.test.ts b/test/development/sass-error/index.test.ts index 44d4a87aaf2224..0f9a5dee011d05 100644 --- a/test/development/sass-error/index.test.ts +++ b/test/development/sass-error/index.test.ts @@ -21,7 +21,9 @@ describe('app dir - css', () => { it('should use original source points for sass errors', async () => { const browser = await next.browser('/sass-error') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + }) const source = await getRedboxSource(browser) // css-loader does not report an error for this case diff --git a/test/e2e/app-dir/dynamic-href/dynamic-href.test.ts b/test/e2e/app-dir/dynamic-href/dynamic-href.test.ts index 3bed1ca336d725..60501b9b10a707 100644 --- a/test/e2e/app-dir/dynamic-href/dynamic-href.test.ts +++ b/test/e2e/app-dir/dynamic-href/dynamic-href.test.ts @@ -19,8 +19,7 @@ describe('dynamic-href', () => { it('should error when using dynamic href.pathname in app dir', async () => { const browser = await next.browser('/object') - // Error should show up - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxDescription(browser)).toMatchInlineSnapshot( `"Error: Dynamic href \`/object/[slug]\` found in while using the \`/app\` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href"` ) @@ -47,8 +46,7 @@ describe('dynamic-href', () => { it('should error when using dynamic href in app dir', async () => { const browser = await next.browser('/string') - // Error should show up - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxDescription(browser)).toMatchInlineSnapshot( `"Error: Dynamic href \`/object/[slug]\` found in while using the \`/app\` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href"` ) diff --git a/test/e2e/app-dir/dynamic-io-segment-configs/dynamic-io-segment-configs.test.ts b/test/e2e/app-dir/dynamic-io-segment-configs/dynamic-io-segment-configs.test.ts index e4e43262d6b61e..7fd5d989f79e50 100644 --- a/test/e2e/app-dir/dynamic-io-segment-configs/dynamic-io-segment-configs.test.ts +++ b/test/e2e/app-dir/dynamic-io-segment-configs/dynamic-io-segment-configs.test.ts @@ -26,7 +26,7 @@ describe('dynamic-io-segment-configs', () => { if (isNextDev) { const browser = await next.browser('/revalidate') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -79,7 +79,7 @@ describe('dynamic-io-segment-configs', () => { if (isNextDev) { const browser = await next.browser('/revalidate') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts b/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts index bbe993fd141aa8..649f9bd6d5e931 100644 --- a/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts +++ b/test/e2e/app-dir/error-on-next-codemod-comment/error-on-next-codemod-comment.test.ts @@ -21,7 +21,7 @@ describe('app-dir - error-on-next-codemod-comment', () => { it('should error with swc if you have codemod comments left', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) if (process.env.TURBOPACK) { expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` @@ -67,7 +67,7 @@ describe('app-dir - error-on-next-codemod-comment', () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) // Recover the original file content await next.patchFile('app/page.tsx', originFileContent) @@ -76,7 +76,7 @@ describe('app-dir - error-on-next-codemod-comment', () => { it('should disappear the error when you rre the codemod comment', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) let originFileContent await next.patchFile('app/page.tsx', (code) => { @@ -98,7 +98,7 @@ describe('app-dir - error-on-next-codemod-comment', () => { it('should disappear the error when you replace with bypass comment', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) let originFileContent await next.patchFile('app/page.tsx', (code) => { diff --git a/test/e2e/app-dir/errors/index.test.ts b/test/e2e/app-dir/errors/index.test.ts index 6bf778b31fd988..9d25d8e1b795c6 100644 --- a/test/e2e/app-dir/errors/index.test.ts +++ b/test/e2e/app-dir/errors/index.test.ts @@ -162,7 +162,7 @@ describe('app-dir - errors', () => { const browser = await next.browser('/global-error-boundary/server') if (isNextDev) { - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxHeader(browser)).toMatch(/custom server error/) } else { expect( diff --git a/test/e2e/app-dir/global-error/basic/index.test.ts b/test/e2e/app-dir/global-error/basic/index.test.ts index aabc0e282916da..2f1cc6bb603efc 100644 --- a/test/e2e/app-dir/global-error/basic/index.test.ts +++ b/test/e2e/app-dir/global-error/basic/index.test.ts @@ -1,11 +1,6 @@ import { assertHasRedbox, getRedboxHeader } from 'next-test-utils' import { nextTestSetup } from 'e2e-utils' -async function testDev(browser, errorRegex) { - await assertHasRedbox(browser) - expect(await getRedboxHeader(browser)).toMatch(errorRegex) -} - describe('app dir - global error', () => { const { next, isNextDev } = nextTestSetup({ files: __dirname, @@ -19,9 +14,9 @@ describe('app dir - global error', () => { .click() if (isNextDev) { - await testDev(browser, /Error: Client error/) + await assertHasRedbox(browser) + expect(await getRedboxHeader(browser)).toMatch(/Error: Client error/) } else { - await browser expect(await browser.elementByCss('#error').text()).toBe( 'Global error: Client error' ) @@ -32,7 +27,8 @@ describe('app dir - global error', () => { const browser = await next.browser('/ssr/server') if (isNextDev) { - await testDev(browser, /Error: server page error/) + await assertHasRedbox(browser, { pageResponseCode: 500 }) + expect(await getRedboxHeader(browser)).toMatch(/Error: server page error/) } else { expect(await browser.elementByCss('h1').text()).toBe('Global Error') expect(await browser.elementByCss('#error').text()).toBe( @@ -46,7 +42,8 @@ describe('app dir - global error', () => { const browser = await next.browser('/ssr/client') if (isNextDev) { - await testDev(browser, /Error: client page error/) + await assertHasRedbox(browser, { pageResponseCode: 500 }) + expect(await getRedboxHeader(browser)).toMatch(/Error: client page error/) } else { expect(await browser.elementByCss('h1').text()).toBe('Global Error') expect(await browser.elementByCss('#error').text()).toBe( @@ -70,7 +67,8 @@ describe('app dir - global error', () => { const browser = await next.browser('/metadata-error-without-boundary') if (isNextDev) { - await testDev(browser, /Error: Metadata error/) + await assertHasRedbox(browser, { pageResponseCode: 500 }) + expect(await getRedboxHeader(browser)).toMatch(/Error: Metadata error/) } else { expect(await browser.elementByCss('h1').text()).toBe('Global Error') expect(await browser.elementByCss('#error').text()).toBe( @@ -82,7 +80,8 @@ describe('app dir - global error', () => { it('should catch the client error thrown in the nested routes', async () => { const browser = await next.browser('/nested/nested') if (isNextDev) { - await testDev(browser, /Error: nested error/) + await assertHasRedbox(browser) + expect(await getRedboxHeader(browser)).toMatch(/Error: nested error/) } else { expect(await browser.elementByCss('h1').text()).toBe('Global Error') expect(await browser.elementByCss('#error').text()).toBe( diff --git a/test/e2e/app-dir/global-error/layout-error/index.test.ts b/test/e2e/app-dir/global-error/layout-error/index.test.ts index e042b84e8bced4..32fa9143107fc1 100644 --- a/test/e2e/app-dir/global-error/layout-error/index.test.ts +++ b/test/e2e/app-dir/global-error/layout-error/index.test.ts @@ -1,11 +1,6 @@ import { assertHasRedbox, getRedboxHeader } from 'next-test-utils' import { nextTestSetup } from 'e2e-utils' -async function testDev(browser, errorRegex) { - await assertHasRedbox(browser) - expect(await getRedboxHeader(browser)).toMatch(errorRegex) -} - describe('app dir - global error - layout error', () => { const { next, isNextDev, skipped } = nextTestSetup({ files: __dirname, @@ -20,7 +15,10 @@ describe('app dir - global error - layout error', () => { const browser = await next.browser('/') if (isNextDev) { - await testDev(browser, /Global error: layout error/) + await assertHasRedbox(browser, { pageResponseCode: 500 }) + expect(await getRedboxHeader(browser)).toMatch( + /Global error: layout error/ + ) } else { expect(await browser.elementByCss('h1').text()).toBe('Global Error') expect(await browser.elementByCss('#error').text()).toBe( diff --git a/test/e2e/app-dir/global-error/with-style-import/index.test.ts b/test/e2e/app-dir/global-error/with-style-import/index.test.ts index 22ef8abf6dea67..3c9ad4331cb7c7 100644 --- a/test/e2e/app-dir/global-error/with-style-import/index.test.ts +++ b/test/e2e/app-dir/global-error/with-style-import/index.test.ts @@ -1,11 +1,6 @@ import { assertHasRedbox, getRedboxHeader } from 'next-test-utils' import { nextTestSetup } from 'e2e-utils' -async function testDev(browser, errorRegex) { - await assertHasRedbox(browser) - expect(await getRedboxHeader(browser)).toMatch(errorRegex) -} - describe('app dir - global error - with style import', () => { const { next, isNextDev, skipped } = nextTestSetup({ files: __dirname, @@ -20,7 +15,8 @@ describe('app dir - global error - with style import', () => { const browser = await next.browser('/') if (isNextDev) { - await testDev(browser, /Root Layout Error/) + await assertHasRedbox(browser, { pageResponseCode: 500 }) + expect(await getRedboxHeader(browser)).toMatch(/Root Layout Error/) return } diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts index 7c72ff6a0217e1..19ce7e09c76488 100644 --- a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts +++ b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts @@ -4,11 +4,6 @@ import { assertHasRedbox, getRedboxHeader } from 'next-test-utils' const errorMessage = 'images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config' -async function testDev(browser, errorRegex) { - await assertHasRedbox(browser) - expect(await getRedboxHeader(browser)).toMatch(errorRegex) -} - describe('Error test if the loader file export a named function', () => { describe('in Development', () => { const { next, isNextDev } = nextTestSetup({ @@ -19,12 +14,14 @@ describe('Error test if the loader file export a named function', () => { ;(isNextDev ? describe : describe.skip)('development only', () => { it('should show the error when using `Image` component', async () => { const browser = await next.browser('/') - await testDev(browser, errorMessage) + await assertHasRedbox(browser, { pageResponseCode: 500 }) + expect(await getRedboxHeader(browser)).toMatch(errorMessage) }) it('should show the error when using `getImageProps` method', async () => { const browser = await next.browser('/get-img-props') - await testDev(browser, errorMessage) + await assertHasRedbox(browser, { pageResponseCode: 500 }) + expect(await getRedboxHeader(browser)).toMatch(errorMessage) }) }) }) diff --git a/test/e2e/app-dir/next-after-pages/index.test.ts b/test/e2e/app-dir/next-after-pages/index.test.ts index 960656a036abcc..353ff749b05d0f 100644 --- a/test/e2e/app-dir/next-after-pages/index.test.ts +++ b/test/e2e/app-dir/next-after-pages/index.test.ts @@ -60,7 +60,7 @@ _describe('unstable_after() - pages', () => { ])('$title', async ({ path }) => { const browser = await next.browser(path) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxSource(browser)).toMatch( /You're importing a component that needs "?unstable_after"?\. That only works in a Server Component which is not supported in the pages\/ directory\./ ) diff --git a/test/integration/app-dir-export/test/utils.ts b/test/integration/app-dir-export/test/utils.ts index 82b4e6c08f840e..8d0b31ddc9fa0a 100644 --- a/test/integration/app-dir-export/test/utils.ts +++ b/test/integration/app-dir-export/test/utils.ts @@ -176,7 +176,10 @@ export async function runTests({ if (isDev) { const url = dynamicPage ? '/another/first' : '/api/json' const browser = await webdriver(port, url) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) const header = await getRedboxHeader(browser) const source = await getRedboxSource(browser) expect(`${header}\n${source}`).toContain(expectedErrMsg) diff --git a/test/integration/config-output-export/test/index.test.ts b/test/integration/config-output-export/test/index.test.ts index 38575c1b70b112..bda5a8e931d270 100644 --- a/test/integration/config-output-export/test/index.test.ts +++ b/test/integration/config-output-export/test/index.test.ts @@ -221,7 +221,7 @@ describe('config-output-export', () => { await killApp(app).catch(() => {}) fs.rmSync(blog) } - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxHeader(browser)).toContain( 'ISR cannot be used with "output: export".' ) @@ -312,7 +312,7 @@ describe('config-output-export', () => { await killApp(app).catch(() => {}) fs.rmSync(blog) } - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxHeader(browser)).toContain( 'getServerSideProps cannot be used with "output: export".' ) @@ -352,7 +352,7 @@ describe('config-output-export', () => { output: 'export', }) browser = await webdriver(result.port, '/posts/one') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxHeader(browser)).toContain( 'getStaticPaths with "fallback: true" cannot be used with "output: export".' ) @@ -396,7 +396,7 @@ describe('config-output-export', () => { output: 'export', }) browser = await webdriver(result.port, '/posts/one') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxHeader(browser)).toContain( 'getStaticPaths with "fallback: blocking" cannot be used with "output: export".' ) diff --git a/test/integration/dynamic-routing/test/index.test.js b/test/integration/dynamic-routing/test/index.test.js index 69c61598122b79..76ecca2666f6e0 100644 --- a/test/integration/dynamic-routing/test/index.test.js +++ b/test/integration/dynamic-routing/test/index.test.js @@ -1200,7 +1200,7 @@ function runTests({ dev }) { await browser .elementByCss('#view-post-1-interpolated-incorrectly') .click() - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const header = await getRedboxHeader(browser) expect(header).toContain( 'The provided `href` (/[name]?another=value) value is missing query values (name) to be interpolated properly.' diff --git a/test/integration/invalid-href/test/index.test.js b/test/integration/invalid-href/test/index.test.js index a8976ab9aeb7a6..93ee428e583c8b 100644 --- a/test/integration/invalid-href/test/index.test.js +++ b/test/integration/invalid-href/test/index.test.js @@ -49,7 +49,7 @@ const showsError = async (pathname, regex, click = false, isWarn = false) => { return warnLogs.join('\n') }, regex) } else { - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) const errorContent = await getRedboxHeader(browser) expect(errorContent).toMatch(regex) } diff --git a/test/integration/next-image-legacy/base-path/test/index.test.ts b/test/integration/next-image-legacy/base-path/test/index.test.ts index 15d9cee09cf29b..d9c20e93e01dc3 100644 --- a/test/integration/next-image-legacy/base-path/test/index.test.ts +++ b/test/integration/next-image-legacy/base-path/test/index.test.ts @@ -386,7 +386,10 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/docs/invalid-src') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`' ) @@ -398,7 +401,10 @@ function runTests(mode) { '/docs/invalid-src-proto-relative' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)' ) diff --git a/test/integration/next-image-legacy/default/test/index.test.ts b/test/integration/next-image-legacy/default/test/index.test.ts index a7578f60c0a9d5..a3e04cdc36194a 100644 --- a/test/integration/next-image-legacy/default/test/index.test.ts +++ b/test/integration/next-image-legacy/default/test/index.test.ts @@ -824,7 +824,11 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/invalid-src') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`' ) @@ -833,7 +837,11 @@ function runTests(mode) { it('should show invalid src error when protocol-relative', async () => { const browser = await webdriver(appPort, '/invalid-src-proto-relative') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)' ) @@ -842,7 +850,11 @@ function runTests(mode) { it('should show error when string src and placeholder=blur and blurDataURL is missing', async () => { const browser = await webdriver(appPort, '/invalid-placeholder-blur') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.` ) @@ -851,7 +863,11 @@ function runTests(mode) { it('should show error when not numeric string width or height', async () => { const browser = await webdriver(appPort, '/invalid-width-or-height') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" or "height" property. These should be numeric values.` ) @@ -863,7 +879,11 @@ function runTests(mode) { '/invalid-placeholder-blur-static' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toMatch( /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/ ) diff --git a/test/integration/next-image-new/app-dir-localpatterns/test/index.test.ts b/test/integration/next-image-new/app-dir-localpatterns/test/index.test.ts index 008f4c2b410300..d71dc6332beedd 100644 --- a/test/integration/next-image-new/app-dir-localpatterns/test/index.test.ts +++ b/test/integration/next-image-new/app-dir-localpatterns/test/index.test.ts @@ -55,7 +55,9 @@ function runTests(mode: 'dev' | 'server') { const page = '/' + id const browser = await webdriver(appPort, page) if (mode === 'dev') { - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toMatch( /Invalid src prop (.+) on `next\/image` does not match `images.localPatterns` configured/g ) diff --git a/test/integration/next-image-new/app-dir/test/index.test.ts b/test/integration/next-image-new/app-dir/test/index.test.ts index 46fbaa676e91d5..8b8a6e3385910f 100644 --- a/test/integration/next-image-new/app-dir/test/index.test.ts +++ b/test/integration/next-image-new/app-dir/test/index.test.ts @@ -915,7 +915,9 @@ function runTests(mode: 'dev' | 'server') { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/invalid-src') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`' ) @@ -924,7 +926,9 @@ function runTests(mode: 'dev' | 'server') { it('should show invalid src error when protocol-relative', async () => { const browser = await webdriver(appPort, '/invalid-src-proto-relative') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)' ) @@ -932,7 +936,9 @@ function runTests(mode: 'dev' | 'server') { it('should show invalid src with leading space', async () => { const browser = await webdriver(appPort, '/invalid-src-leading-space') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Image with src " /test.jpg" cannot start with a space or control character.' ) @@ -940,7 +946,9 @@ function runTests(mode: 'dev' | 'server') { it('should show invalid src with trailing space', async () => { const browser = await webdriver(appPort, '/invalid-src-trailing-space') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Image with src "/test.png " cannot end with a space or control character.' ) @@ -949,7 +957,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when string src and placeholder=blur and blurDataURL is missing', async () => { const browser = await webdriver(appPort, '/invalid-placeholder-blur') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.` ) @@ -958,7 +968,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when invalid width prop', async () => { const browser = await webdriver(appPort, '/invalid-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "100%".` ) @@ -967,7 +979,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when invalid Infinity width prop', async () => { const browser = await webdriver(appPort, '/invalid-Infinity-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "Infinity".` ) @@ -976,7 +990,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when invalid height prop', async () => { const browser = await webdriver(appPort, '/invalid-height') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "height" property. Expected a numeric value in pixels but received "50vh".` ) @@ -995,7 +1011,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when missing width prop', async () => { const browser = await webdriver(appPort, '/missing-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "width" property.` ) @@ -1004,7 +1022,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when missing height prop', async () => { const browser = await webdriver(appPort, '/missing-height') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "height" property.` ) @@ -1013,7 +1033,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when width prop on fill image', async () => { const browser = await webdriver(appPort, '/invalid-fill-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/wide.png" has both "width" and "fill" properties.` ) @@ -1022,7 +1044,9 @@ function runTests(mode: 'dev' | 'server') { it('should show error when CSS position changed on fill image', async () => { const browser = await webdriver(appPort, '/invalid-fill-position') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/wide.png" has both "fill" and "style.position" properties. Images with "fill" always use position absolute - it cannot be modified.` ) @@ -1034,7 +1058,9 @@ function runTests(mode: 'dev' | 'server') { '/invalid-placeholder-blur-static' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toMatch( /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/ ) diff --git a/test/integration/next-image-new/base-path/test/index.test.js b/test/integration/next-image-new/base-path/test/index.test.js index b99165da979ee1..97552d0cd3ca43 100644 --- a/test/integration/next-image-new/base-path/test/index.test.js +++ b/test/integration/next-image-new/base-path/test/index.test.js @@ -141,7 +141,11 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/docs/invalid-src') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`' ) @@ -153,7 +157,11 @@ function runTests(mode) { '/docs/invalid-src-proto-relative' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + pageResponseCode: 500, + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain( 'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)' ) diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts index a43a08fb98c16e..a46b6cd82caee4 100644 --- a/test/integration/next-image-new/default/test/index.test.ts +++ b/test/integration/next-image-new/default/test/index.test.ts @@ -917,7 +917,10 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/invalid-src') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( 'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`' ) @@ -926,7 +929,10 @@ function runTests(mode) { it('should show invalid src error when protocol-relative', async () => { const browser = await webdriver(appPort, '/invalid-src-proto-relative') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( 'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)' ) @@ -934,7 +940,10 @@ function runTests(mode) { it('should show invalid src with leading space', async () => { const browser = await webdriver(appPort, '/invalid-src-leading-space') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( 'Image with src " /test.jpg" cannot start with a space or control character.' ) @@ -942,7 +951,10 @@ function runTests(mode) { it('should show invalid src with trailing space', async () => { const browser = await webdriver(appPort, '/invalid-src-trailing-space') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( 'Image with src "/test.png " cannot end with a space or control character.' ) @@ -951,7 +963,10 @@ function runTests(mode) { it('should show error when string src and placeholder=blur and blurDataURL is missing', async () => { const browser = await webdriver(appPort, '/invalid-placeholder-blur') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.` ) @@ -960,7 +975,10 @@ function runTests(mode) { it('should show error when invalid width prop', async () => { const browser = await webdriver(appPort, '/invalid-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "100%".` ) @@ -969,7 +987,10 @@ function runTests(mode) { it('should show error when invalid Infinity width prop', async () => { const browser = await webdriver(appPort, '/invalid-Infinity-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "Infinity".` ) @@ -978,7 +999,10 @@ function runTests(mode) { it('should show error when invalid height prop', async () => { const browser = await webdriver(appPort, '/invalid-height') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "height" property. Expected a numeric value in pixels but received "50vh".` ) @@ -997,7 +1021,10 @@ function runTests(mode) { it('should show error when missing width prop', async () => { const browser = await webdriver(appPort, '/missing-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "width" property.` ) @@ -1006,7 +1033,10 @@ function runTests(mode) { it('should show error when missing height prop', async () => { const browser = await webdriver(appPort, '/missing-height') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "height" property.` ) @@ -1015,7 +1045,10 @@ function runTests(mode) { it('should show error when width prop on fill image', async () => { const browser = await webdriver(appPort, '/invalid-fill-width') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/wide.png" has both "width" and "fill" properties.` ) @@ -1024,7 +1057,10 @@ function runTests(mode) { it('should show error when CSS position changed on fill image', async () => { const browser = await webdriver(appPort, '/invalid-fill-position') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toContain( `Image with src "/wide.png" has both "fill" and "style.position" properties. Images with "fill" always use position absolute - it cannot be modified.` ) @@ -1036,7 +1072,10 @@ function runTests(mode) { '/invalid-placeholder-blur-static' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + fixmeStackFramesHaveBrokenSourcemaps: true, + pageResponseCode: 500, + }) expect(await getRedboxHeader(browser)).toMatch( /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/ ) diff --git a/test/integration/next-image-new/export-config/test/index.test.ts b/test/integration/next-image-new/export-config/test/index.test.ts index 50601d9e6710f6..900226518ee2ce 100644 --- a/test/integration/next-image-new/export-config/test/index.test.ts +++ b/test/integration/next-image-new/export-config/test/index.test.ts @@ -35,7 +35,10 @@ describe('next/image with output export config', () => { const browser = await webdriver(appPort, '/') const msg = "Image Optimization using the default loader is not compatible with `{ output: 'export' }`." - await assertHasRedbox(browser) + await assertHasRedbox(browser, { + // Main issue here that a local run hits a Node.js bug: https://linear.app/vercel/issue/NDX-505 + fixmeStackFramesHaveBrokenSourcemaps: true, + }) expect(await getRedboxHeader(browser)).toContain(msg) expect(stderr).toContain(msg) }) diff --git a/test/integration/next-image-new/invalid-image-import/test/index.test.ts b/test/integration/next-image-new/invalid-image-import/test/index.test.ts index 17c0dde4439177..ad6f5707daf3b1 100644 --- a/test/integration/next-image-new/invalid-image-import/test/index.test.ts +++ b/test/integration/next-image-new/invalid-image-import/test/index.test.ts @@ -22,7 +22,7 @@ function runTests({ isDev }) { it('should show error', async () => { if (isDev) { const browser = await webdriver(appPort, '/') - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxHeader(browser)).toMatch('Failed to compile') const source = await getRedboxSource(browser) if (process.env.TURBOPACK) { diff --git a/test/integration/server-side-dev-errors/test/index.test.js b/test/integration/server-side-dev-errors/test/index.test.js index 536259c7e3699a..9554ecabd3efb9 100644 --- a/test/integration/server-side-dev-errors/test/index.test.js +++ b/test/integration/server-side-dev-errors/test/index.test.js @@ -90,7 +90,7 @@ describe('server-side dev errors', () => { '\n> 6 | missingVar;return {' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxSource(browser)).toContain('missingVar') await fs.writeFile(gspPage, content, { flush: true }) @@ -143,7 +143,7 @@ describe('server-side dev errors', () => { '\n> 6 | missingVar;return {' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxSource(browser)).toContain('missingVar') await fs.writeFile(gsspPage, content) @@ -196,11 +196,11 @@ describe('server-side dev errors', () => { '\n> 6 | missingVar;return {' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxSource(browser)).toContain('missingVar') await fs.writeFile(dynamicGsspPage, content) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) } finally { await fs.writeFile(dynamicGsspPage, content) } @@ -249,11 +249,11 @@ describe('server-side dev errors', () => { "\n> 2 | missingVar;res.status(200).json({ hello: 'world' })" ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxSource(browser)).toContain('missingVar') await fs.writeFile(apiPage, content) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) } finally { await fs.writeFile(apiPage, content) } @@ -305,11 +305,11 @@ describe('server-side dev errors', () => { '\n> 2 | missingVar;res.status(200).json({ slug: req.query.slug })' ) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) expect(await getRedboxSource(browser)).toContain('missingVar') await fs.writeFile(dynamicApiPage, content) - await assertHasRedbox(browser) + await assertHasRedbox(browser, { pageResponseCode: 500 }) } finally { await fs.writeFile(dynamicApiPage, content) } diff --git a/test/lib/development-sandbox.ts b/test/lib/development-sandbox.ts index 803e1804fd3cff..ad56f7c5200592 100644 --- a/test/lib/development-sandbox.ts +++ b/test/lib/development-sandbox.ts @@ -5,9 +5,11 @@ import { getRedboxHeader, getRedboxSource, getVersionCheckerText, + type AssertHasRedboxOptions, assertHasRedbox, assertNoRedbox, waitFor, + type OpenRedboxOptions, openRedbox, getRedboxDescriptionWarning, toggleCollapseComponentStack, @@ -118,14 +120,14 @@ export async function createSandbox( ) } }, - async assertHasRedbox() { - return assertHasRedbox(browser) + async assertHasRedbox(options?: AssertHasRedboxOptions) { + return assertHasRedbox(browser, options) }, async assertNoRedbox() { return assertNoRedbox(browser) }, - async openRedbox() { - return openRedbox(browser) + async openRedbox(options?: OpenRedboxOptions) { + return openRedbox(browser, options) }, async hasErrorToast() { return Boolean(await hasErrorToast(browser)) diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts index 38d005d312853f..173b1fe157f9b0 100644 --- a/test/lib/next-test-utils.ts +++ b/test/lib/next-test-utils.ts @@ -821,7 +821,22 @@ export async function retry( } } -export async function assertHasRedbox(browser: BrowserInterface) { +export interface AssertHasRedboxOptions { + /** + * Set to true, if any stackframe in the Redbox causes the middleware to return 500. + * This is always a bug that should be fixed. + */ + fixmeStackFramesHaveBrokenSourcemaps?: boolean + /** + * Set to 500 if the page is expected to return a 500 + * Can be an array representing each response recorded in this test. + */ + pageResponseCode?: number | number[] +} +export async function assertHasRedbox( + browser: BrowserInterface, + options: AssertHasRedboxOptions = {} +) { try { await retry( async () => { @@ -846,6 +861,82 @@ export async function assertHasRedbox(browser: BrowserInterface) { Error.captureStackTrace(error, assertHasRedbox) throw error } + + const logs = await browser.log() + const internalServerErrorLogs = logs.filter((log) => { + return ( + log.source === 'error' && + log.message.includes( + 'Failed to load resource: the server responded with a status of 500 (Internal Server Error)' + ) + ) + }) + + if ( + options.pageResponseCode === 500 && + internalServerErrorLogs.length === 0 + ) { + const error = new Error( + 'Expected the page to return a 500 (Internal Server Error) but found no message indicating this error occured: ' + + logs + .filter((log) => log.source === 'error') + .map((log) => log.message) + .join('\n') + ) + Error.captureStackTrace(error, assertHasRedbox) + throw error + } + + const expectedInternalServerError = + options.pageResponseCode === 500 + ? 1 + : Array.isArray(options.pageResponseCode) + ? options.pageResponseCode.filter( + (responseCode) => responseCode === 500 + ).length + : 0 + const stackFramesWithBrokenSourceMaps = + internalServerErrorLogs.length - expectedInternalServerError + const stackFramesHaveBrokenSourcemapsActualExpected = + options.fixmeStackFramesHaveBrokenSourcemaps + if ( + stackFramesWithBrokenSourceMaps > 0 && + !stackFramesHaveBrokenSourcemapsActualExpected + ) { + let error: Error + if (stackFramesWithBrokenSourceMaps === 1) { + error = new Error( + 'Expected no 500 but found one. ' + + 'This is likely due to the page returning a 500. ' + + 'Pass the `pageResponseCode: 500` if this is expected.' + ) + } else { + // Ensures that tests are automatically updated when the bug is fixed. + error = new Error( + `'Expected no broken sourcemaps but found ${stackFramesWithBrokenSourceMaps}. ` + + 'Check the callstack to find the frames that are not sourcemapped. ' + + 'Pass the `fixmeStackFramesHaveBrokenSourcemaps` option to silence this error. ' + + 'Though keep in mind that this is a legit bug. ' + + `Alternatively, if the page actually triggerd ${stackFramesWithBrokenSourceMaps} ` + + `navigations, pass \`pageResponseCode: [${Array.from({ length: stackFramesWithBrokenSourceMaps }, () => 500).join(', ')}]\`.` + ) + } + + Error.captureStackTrace(error, assertHasRedbox) + throw error + } else if ( + stackFramesWithBrokenSourceMaps === 0 && + stackFramesHaveBrokenSourcemapsActualExpected + ) { + // Ensures that tests are automatically updated when the bug is fixed. + const error = new Error( + 'Expected broken sourcemaps but found none. ' + + 'Seems like this bug was fixed. ' + + 'You can safely remove the `fixmeStackFramesHaveBrokenSourcemaps` option.' + ) + Error.captureStackTrace(error, assertHasRedbox) + throw error + } } export async function assertNoRedbox(browser: BrowserInterface) { @@ -892,11 +983,15 @@ export async function hasErrorToast( }) } +export interface OpenRedboxOptions extends AssertHasRedboxOptions {} /** * Has retried version of {@link hasErrorToast} built-in. * Success implies {@link assertHasRedbox}. */ -export async function openRedbox(browser: BrowserInterface): Promise { +export async function openRedbox( + browser: BrowserInterface, + options: OpenRedboxOptions = {} +): Promise { try { browser.waitForElementByCss('[data-nextjs-toast]', 5000).click() } catch (cause) { @@ -904,7 +999,7 @@ export async function openRedbox(browser: BrowserInterface): Promise { Error.captureStackTrace(error, openRedbox) throw error } - await assertHasRedbox(browser) + await assertHasRedbox(browser, options) } export function getRedboxHeader(browser: BrowserInterface) {