diff --git a/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts b/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts index 64516022c33695..030d979ce34042 100644 --- a/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts +++ b/test/development/acceptance-app/ReactRefreshLogBox-builtins.test.ts @@ -304,7 +304,7 @@ describe('ReactRefreshLogBox-builtins app', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.documentElement.innerHTML) ).toContain('index page') diff --git a/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts b/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts index 9990b10c0a7342..e1b26c39dc8c43 100644 --- a/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts +++ b/test/development/acceptance-app/ReactRefreshLogBox-scss.test.ts @@ -34,17 +34,17 @@ describe.skip('ReactRefreshLogBox scss app', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() // Syntax error await session.patch('index.module.scss', `.button { font-size: :5px; }`) - await session.assertHasRedbox() + await session.waitForRedbox() const source = await session.getRedboxSource() expect(source).toMatchSnapshot() // Fix syntax error await session.patch('index.module.scss', `.button { font-size: 5px; }`) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) test('scss module pure selector error', async () => { @@ -69,7 +69,7 @@ describe.skip('ReactRefreshLogBox scss app', () => { // Checks for selectors that can't be prefixed. // Selector "button" is not pure (pure selectors must contain at least one local class or id) await session.patch('index.module.scss', `button { font-size: 5px; }`) - await session.assertHasRedbox() + await session.waitForRedbox() const source2 = await session.getRedboxSource() expect(source2).toMatchSnapshot() }) diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts index d7305a5941283b..b4ebf51c2a2910 100644 --- a/test/development/acceptance-app/ReactRefreshLogBox.test.ts +++ b/test/development/acceptance-app/ReactRefreshLogBox.test.ts @@ -265,7 +265,7 @@ describe('ReactRefreshLogBox app', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', @@ -388,7 +388,7 @@ describe('ReactRefreshLogBox app', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) ).toBe('hello') @@ -452,7 +452,7 @@ describe('ReactRefreshLogBox app', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) ).toBe('hello new') @@ -477,7 +477,7 @@ describe('ReactRefreshLogBox app', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch('index.module.css', `.button`) @@ -957,7 +957,7 @@ describe('ReactRefreshLogBox app', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', outdent` @@ -985,7 +985,7 @@ describe('ReactRefreshLogBox app', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', outdent` @@ -1011,7 +1011,7 @@ describe('ReactRefreshLogBox app', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', outdent` @@ -1131,7 +1131,7 @@ describe('ReactRefreshLogBox app', () => { await retry(async () => { expect(await getToastErrorCount(browser)).toBe(4) }) - await session.assertNoRedbox() + await session.waitForNoRedbox() // Add Component error await session.patch( @@ -1363,7 +1363,7 @@ describe('ReactRefreshLogBox app', () => { expect(await browser.waitForElementByCss('#text').text()).toBe( 'Hello world' ) - await session.assertNoRedbox() + await session.waitForNoRedbox() // Re-add error await session.patch( @@ -1544,7 +1544,7 @@ describe('ReactRefreshLogBox app', () => { await retry(async () => { // Should use `await expect(browser).toDisplayRedbox()` - await session.assertHasRedbox() + await session.waitForRedbox() }) if (isRspack) { @@ -1589,7 +1589,7 @@ describe('ReactRefreshLogBox app', () => { 'index.js', 'export default function Page() {return

hello world

}' ) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) } diff --git a/test/development/acceptance-app/ReactRefreshModule.test.ts b/test/development/acceptance-app/ReactRefreshModule.test.ts index 20a097a23bfc3d..a3917313cd5061 100644 --- a/test/development/acceptance-app/ReactRefreshModule.test.ts +++ b/test/development/acceptance-app/ReactRefreshModule.test.ts @@ -12,7 +12,7 @@ describe('ReactRefreshModule app', () => { it('should allow any variable names', async () => { await using sandbox = await createSandbox(next, new Map([])) const { session } = sandbox - await session.assertNoRedbox() + await session.waitForNoRedbox() const variables = [ '_a', @@ -34,7 +34,7 @@ describe('ReactRefreshModule app', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect(next.cliOutput).not.toContain( `'${variable}' has already been declared` ) diff --git a/test/development/acceptance-app/ReactRefreshRegression.test.ts b/test/development/acceptance-app/ReactRefreshRegression.test.ts index f274808e5a0135..8696335e732386 100644 --- a/test/development/acceptance-app/ReactRefreshRegression.test.ts +++ b/test/development/acceptance-app/ReactRefreshRegression.test.ts @@ -76,7 +76,7 @@ describe('ReactRefreshRegression app', () => { ) // Verify no hydration mismatch: - await session.assertNoRedbox() + await session.waitForNoRedbox() }) // https://github.com/vercel/next.js/issues/13978 @@ -277,7 +277,7 @@ describe('ReactRefreshRegression app', () => { `export default function () { throw new Error('boom'); }` ) - await session.assertHasRedbox() + await session.waitForRedbox() const source = await session.getRedboxSource() expect(source.split(/\r?\n/g).slice(2).join('\n').replace(/^\n+/, '')) @@ -296,7 +296,7 @@ describe('ReactRefreshRegression app', () => { `export default function Page() { throw new Error('boom'); }` ) - await session.assertHasRedbox() + await session.waitForRedbox() const source = await session.getRedboxSource() expect(source.split(/\r?\n/g).slice(2).join('\n').replace(/^\n+/, '')) @@ -318,7 +318,7 @@ describe('ReactRefreshRegression app', () => { ` ) - await session.assertHasRedbox() + await session.waitForRedbox() const source = await session.getRedboxSource() expect(source.split(/\r?\n/g).slice(2).join('\n').replace(/^\n+/, '')) @@ -366,7 +366,7 @@ describe('ReactRefreshRegression app', () => { let didNotReload = await session.patch('app/content.mdx', `Hello Foo!`) expect(didNotReload).toBe(true) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate( () => document.querySelector('#content').textContent @@ -375,7 +375,7 @@ describe('ReactRefreshRegression app', () => { didNotReload = await session.patch('app/content.mdx', `Hello Bar!`) expect(didNotReload).toBe(true) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate( () => document.querySelector('#content').textContent diff --git a/test/development/acceptance-app/app-hmr-changes.test.ts b/test/development/acceptance-app/app-hmr-changes.test.ts index 64c97ce074f8b9..7a9438a7415660 100644 --- a/test/development/acceptance-app/app-hmr-changes.test.ts +++ b/test/development/acceptance-app/app-hmr-changes.test.ts @@ -52,12 +52,12 @@ describe('Error overlay - RSC build errors', () => { await session.patch(pagePath, break2.replace('break 3', '')) await session.patch(pagePath, break2) - await session.assertHasRedbox() + await session.waitForRedbox() await session.patch(pagePath, break1) await session.patch(pagePath, originalPage) - await session.assertNoRedbox() + await session.waitForNoRedbox() } expect( diff --git a/test/development/acceptance-app/editor-links.test.ts b/test/development/acceptance-app/editor-links.test.ts index b96ef8281c8e9b..2d4ffe5f62bd15 100644 --- a/test/development/acceptance-app/editor-links.test.ts +++ b/test/development/acceptance-app/editor-links.test.ts @@ -86,7 +86,7 @@ describe('Error overlay - editor links', () => { expect(loaded).toBe(true) }) - await session.assertHasRedbox() + await session.waitForRedbox() await clickSourceFile(browser) await check(() => editorRequestsCount, /1/) }) @@ -129,7 +129,7 @@ describe('Error overlay - editor links', () => { ` ) - await session.assertHasRedbox() + await session.waitForRedbox() await clickImportTraceFiles(browser) await check(() => editorRequestsCount, /4/) }) @@ -170,7 +170,7 @@ describe('Error overlay - editor links', () => { ` ) - await session.assertHasRedbox() + await session.waitForRedbox() await clickImportTraceFiles(browser) await check(() => editorRequestsCount, /3/) }) diff --git a/test/development/acceptance-app/error-message-url.test.ts b/test/development/acceptance-app/error-message-url.test.ts index a44bd861bdea81..93911866bb5286 100644 --- a/test/development/acceptance-app/error-message-url.test.ts +++ b/test/development/acceptance-app/error-message-url.test.ts @@ -20,7 +20,7 @@ describe('Error overlay - error message urls', () => { content + '\nexport function getServerSideProps() {}' ) - await session.assertHasRedbox() + await session.waitForRedbox() const link = await browser.elementByCss( '[data-nextjs-terminal] a, [data-nextjs-codeframe] a' diff --git a/test/development/acceptance-app/error-recovery.test.ts b/test/development/acceptance-app/error-recovery.test.ts index 060f5277fb27b3..180967d8e6543b 100644 --- a/test/development/acceptance-app/error-recovery.test.ts +++ b/test/development/acceptance-app/error-recovery.test.ts @@ -115,7 +115,7 @@ describe('Error recovery app', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await check( () => session.evaluate(() => document.querySelector('p').textContent), @@ -384,7 +384,7 @@ describe('Error recovery app', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect(await session.hasErrorToast()).toBe(false) expect( @@ -395,7 +395,7 @@ describe('Error recovery app', () => { await session.evaluate(() => document.querySelector('p').textContent) ).toBe('Count: 2') - await session.assertNoRedbox() + await session.waitForNoRedbox() expect(await session.hasErrorToast()).toBe(false) }) @@ -472,7 +472,7 @@ describe('Error recovery app', () => { // TODO-APP: re-enable when error recovery doesn't reload the page. // expect(didNotReload).toBe(true) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) ).toBe('Hello') @@ -566,7 +566,7 @@ describe('Error recovery app', () => { // TODO-APP: re-enable when error recovery doesn't reload the page. // expect(didNotReload).toBe(true) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) ).toBe('Hello') @@ -868,7 +868,7 @@ describe('Error recovery app', () => { ) // Expected: this fixes the problem - await session.assertNoRedbox() + await session.waitForNoRedbox() }) // https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/3#issuecomment-554137262 diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts index 5c0fb7d5eef9da..507ac88920b857 100644 --- a/test/development/acceptance-app/hydration-error.test.ts +++ b/test/development/acceptance-app/hydration-error.test.ts @@ -3,7 +3,7 @@ import { FileRef, nextTestSetup } from 'e2e-utils' import path from 'path' import { outdent } from 'outdent' import { - assertNoRedbox, + waitForNoRedbox, getRedboxErrorLink, getToastErrorCount, retry, @@ -89,7 +89,7 @@ describe('Error overlay for hydration errors in App router', () => { } `, async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('.child').text()).toBe('Value') } ) diff --git a/test/development/acceptance-app/invalid-imports.test.ts b/test/development/acceptance-app/invalid-imports.test.ts index 6531d8aa436eef..74f1ce7f52ea81 100644 --- a/test/development/acceptance-app/invalid-imports.test.ts +++ b/test/development/acceptance-app/invalid-imports.test.ts @@ -63,7 +63,7 @@ describe('Error Overlay invalid imports', () => { const withoutUseClient = content.replace("'use client'", '') await session.patch(pageFile, withoutUseClient) - await session.assertHasRedbox() + await session.waitForRedbox() if (process.env.IS_TURBOPACK_TEST) { expect(await session.getRedboxSource()).toMatchInlineSnapshot(` "./app @@ -157,7 +157,7 @@ describe('Error Overlay invalid imports', () => { const withoutUseClient = content.replace("'use client'", '') await session.patch(pageFile, withoutUseClient) - await session.assertHasRedbox() + await session.waitForRedbox() if (process.env.IS_TURBOPACK_TEST) { expect(await session.getRedboxSource()).toMatchInlineSnapshot(` "./node_modules/client-only-package @@ -249,7 +249,7 @@ describe('Error Overlay invalid imports', () => { const content = await next.readFile(file) await session.patch(file, "'use client'\n" + content) - await session.assertHasRedbox() + await session.waitForRedbox() if (process.env.IS_TURBOPACK_TEST) { expect(await session.getRedboxSource()).toMatchInlineSnapshot(` "./node_modules/server-only-package diff --git a/test/development/acceptance-app/rsc-build-errors.test.ts b/test/development/acceptance-app/rsc-build-errors.test.ts index 291b5798e3b40f..8f4caaca937ccc 100644 --- a/test/development/acceptance-app/rsc-build-errors.test.ts +++ b/test/development/acceptance-app/rsc-build-errors.test.ts @@ -24,7 +24,7 @@ describe('Error overlay - RSC build errors', () => { ) await session.patch(pageFile, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( '"getServerSideProps" is not supported in app/' ) @@ -46,14 +46,14 @@ describe('Error overlay - RSC build errors', () => { 'export const metadata' ) await session.patch(pageFile, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( 'You are attempting to export "metadata" from a component marked with "use client", which is disallowed.' ) // Restore file await session.patch(pageFile, content) - await session.assertNoRedbox() + await session.waitForNoRedbox() // Add `generateMetadata` error uncomment = content.replace( @@ -61,14 +61,14 @@ describe('Error overlay - RSC build errors', () => { 'export async function generateMetadata' ) await session.patch(pageFile, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( 'You are attempting to export "generateMetadata" from a component marked with "use client", which is disallowed.' ) // Fix the error again to test error overlay works with hmr rebuild await session.patch(pageFile, content) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) it('should throw an error when metadata exports are used together in server components', async () => { @@ -86,7 +86,7 @@ describe('Error overlay - RSC build errors', () => { ) await session.patch(pageFile, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( '"metadata" and "generateMetadata" cannot be exported at the same time, please keep one of them.' ) @@ -109,7 +109,7 @@ describe('Error overlay - RSC build errors', () => { await session.patch(pageFile, uncomment) await next.patchFile(pageFile, content) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( '"getStaticProps" is not supported in app/' ) @@ -127,7 +127,7 @@ describe('Error overlay - RSC build errors', () => { const uncomment = content.replace("// 'use client'", "'use client'") await next.patchFile(pageFile, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( 'directive must be placed before other expressions' ) @@ -148,7 +148,7 @@ describe('Error overlay - RSC build errors', () => { ) await session.patch(pageFile, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( `You’re importing a class component. It only works in a Client Component` ) @@ -170,7 +170,7 @@ describe('Error overlay - RSC build errors', () => { ) await next.patchFile(file, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() if (isTurbopack) { // TODO: fix the issue ordering. // turbopack emits the resolve issue first instead of the transform issue. @@ -224,7 +224,7 @@ describe('Error overlay - RSC build errors', () => { `/server-with-errors/react-apis/${api.toLowerCase()}` ) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( // `Component` has a custom error message api === 'Component' @@ -248,7 +248,7 @@ describe('Error overlay - RSC build errors', () => { `/server-with-errors/react-dom-apis/${api.toLowerCase()}` ) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( `You're importing a component that needs \`${api}\`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the \`"use client"\` directive.` ) @@ -272,7 +272,7 @@ describe('Error overlay - RSC build errors', () => { await session.patch(file, uncomment) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( `You're importing a component that needs "server-only". That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.` ) @@ -288,7 +288,7 @@ describe('Error overlay - RSC build errors', () => { `/server-with-errors/next-cache-in-client/${api.toLowerCase()}` ) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( `You're importing a component that needs "${api}". That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.` ) @@ -305,7 +305,7 @@ describe('Error overlay - RSC build errors', () => { `/server-with-errors/next-cache-in-client/${api.toLowerCase()}` ) const { session } = sandbox - await session.assertNoRedbox() + await session.waitForNoRedbox() }) }) @@ -319,7 +319,7 @@ describe('Error overlay - RSC build errors', () => { `/server-with-errors/next-root-params/without-flag` ) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() if (!isCacheComponentsEnabled) { expect(await session.getRedboxSource()).toInclude( `'next/root-params' can only be imported when \`experimental.rootParams\` is enabled.` @@ -351,7 +351,7 @@ describe('Error overlay - RSC build errors', () => { `/server-with-errors/next-root-params/in-client` ) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( `You're importing a component that needs "next/root-params". That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.` ) @@ -374,7 +374,7 @@ describe('Error overlay - RSC build errors', () => { `/server-with-errors/next-root-params/in-client-await-import` ) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxSource()).toInclude( `'next/root-params' cannot be imported from a Client Component module. It should only be used from a Server Component.` ) @@ -395,7 +395,7 @@ describe('Error overlay - RSC build errors', () => { content.replace('() =>

hello dynamic world

', 'undefined') ) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxDescription()).toInclude( `Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.` ) @@ -414,7 +414,7 @@ describe('Error overlay - RSC build errors', () => { 'export default function Error() {}' ) - await session.assertHasRedbox() + await session.waitForRedbox() await expect(session.getRedboxSource()).resolves.toMatch( /must be a Client \n| Component/ ) @@ -464,7 +464,7 @@ describe('Error overlay - RSC build errors', () => { // Empty file await session.patch('app/server-with-errors/error-file/error.js', '') - await session.assertHasRedbox() + await session.waitForRedbox() await expect(session.getRedboxSource()).resolves.toMatch( /Add the "use client"/ ) @@ -511,7 +511,7 @@ describe('Error overlay - RSC build errors', () => { const { session } = sandbox await session.patch(pagePath, content) - await session.assertHasRedbox() + await session.waitForRedbox() expect(await session.getRedboxDescription()).toContain( 'Cannot add property x, object is not extensible' diff --git a/test/development/acceptance-app/server-components.test.ts b/test/development/acceptance-app/server-components.test.ts index aa63ce6aa27e77..7b9f6a7dffbc6b 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.waitForRedbox() // 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() @@ -552,7 +552,7 @@ describe('Error Overlay for server components', () => { ]) ) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() // 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/ReactRefreshLogBox-app-doc.test.ts b/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts index e81a04561d13bd..a303a28cc5af4e 100644 --- a/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox-app-doc.test.ts @@ -36,7 +36,7 @@ describe('ReactRefreshLogBox _app _document', () => { export default MyApp ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) test('empty _document shows logbox', async () => { @@ -83,7 +83,7 @@ describe('ReactRefreshLogBox _app _document', () => { export default MyDocument ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) test('_app syntax error shows logbox', async () => { @@ -186,7 +186,7 @@ describe('ReactRefreshLogBox _app _document', () => { export default MyApp ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) test('_document syntax error shows logbox', async () => { @@ -312,6 +312,6 @@ describe('ReactRefreshLogBox _app _document', () => { export default MyDocument ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) }) diff --git a/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts b/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts index 89a7167baf5f29..a14e77f8a35d6a 100644 --- a/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts @@ -310,7 +310,7 @@ describe('ReactRefreshLogBox', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.documentElement.innerHTML) ).toContain('index page') diff --git a/test/development/acceptance/ReactRefreshLogBox-scss.test.ts b/test/development/acceptance/ReactRefreshLogBox-scss.test.ts index 697fd8fb3af22f..36406a0150503e 100644 --- a/test/development/acceptance/ReactRefreshLogBox-scss.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox-scss.test.ts @@ -33,11 +33,11 @@ describe.skip('ReactRefreshLogBox scss', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() // Syntax error await session.patch('index.module.scss', `.button { font-size: :5px; }`) - await session.assertHasRedbox() + await session.waitForRedbox() const source = await session.getRedboxSource() expect(source).toMatchSnapshot() }) @@ -64,7 +64,7 @@ describe.skip('ReactRefreshLogBox scss', () => { // Checks for selectors that can't be prefixed. // Selector "button" is not pure (pure selectors must contain at least one local class or id) await session.patch('index.module.scss', `button { font-size: 5px; }`) - await session.assertHasRedbox() + await session.waitForRedbox() const source2 = await session.getRedboxSource() expect(source2).toMatchSnapshot() }) diff --git a/test/development/acceptance/ReactRefreshLogBox.test.ts b/test/development/acceptance/ReactRefreshLogBox.test.ts index 430dd83ffd7cb4..2192fdc8502dcc 100644 --- a/test/development/acceptance/ReactRefreshLogBox.test.ts +++ b/test/development/acceptance/ReactRefreshLogBox.test.ts @@ -425,7 +425,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', @@ -547,7 +547,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) ).toBe('hello') @@ -664,7 +664,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) ).toBe('hello new') @@ -689,7 +689,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() // Syntax error await session.patch('index.module.css', `.button`) @@ -829,7 +829,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await browser.elementByCss('button').click() if (isReact18) { @@ -880,7 +880,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await browser.elementByCss('button').click() if (isReact18) { @@ -931,7 +931,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await browser.elementByCss('button').click() if (isReact18) { @@ -982,7 +982,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await browser.elementByCss('button').click() if (isReact18) { @@ -1033,7 +1033,7 @@ describe('ReactRefreshLogBox', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await browser.elementByCss('button').click() if (isReact18) { @@ -1116,7 +1116,7 @@ describe('ReactRefreshLogBox', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', outdent` @@ -1166,7 +1166,7 @@ describe('ReactRefreshLogBox', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', outdent` @@ -1212,7 +1212,7 @@ describe('ReactRefreshLogBox', () => { } ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() await session.patch( 'index.js', outdent` diff --git a/test/development/acceptance/ReactRefreshModule.test.ts b/test/development/acceptance/ReactRefreshModule.test.ts index 11af6b469b5cd4..2d0b433a8b1d7c 100644 --- a/test/development/acceptance/ReactRefreshModule.test.ts +++ b/test/development/acceptance/ReactRefreshModule.test.ts @@ -11,7 +11,7 @@ describe('ReactRefreshModule', () => { it('should allow any variable names', async () => { await using sandbox = await createSandbox(next) const { session } = sandbox - await session.assertNoRedbox() + await session.waitForNoRedbox() const variables = [ '_a', @@ -30,7 +30,7 @@ describe('ReactRefreshModule', () => { return null }` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect(next.cliOutput).not.toContain( `'${variable}' has already been declared` ) diff --git a/test/development/acceptance/ReactRefreshRegression.test.ts b/test/development/acceptance/ReactRefreshRegression.test.ts index 17aeb286fce24d..d9eb408da6f79d 100644 --- a/test/development/acceptance/ReactRefreshRegression.test.ts +++ b/test/development/acceptance/ReactRefreshRegression.test.ts @@ -76,7 +76,7 @@ describe('ReactRefreshRegression', () => { ) // Verify no hydration mismatch: - await session.assertNoRedbox() + await session.waitForNoRedbox() }) // https://github.com/vercel/next.js/issues/13978 @@ -341,7 +341,7 @@ describe('ReactRefreshRegression', () => { let didNotReload = await session.patch('pages/mdx.mdx', `Hello Foo!`) expect(didNotReload).toBe(true) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate( () => document.querySelector('#__next').textContent @@ -350,7 +350,7 @@ describe('ReactRefreshRegression', () => { didNotReload = await session.patch('pages/mdx.mdx', `Hello Bar!`) expect(didNotReload).toBe(true) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate( () => document.querySelector('#__next').textContent diff --git a/test/development/acceptance/error-recovery.test.ts b/test/development/acceptance/error-recovery.test.ts index 94d2592f1b5675..1c07c0437c6ea7 100644 --- a/test/development/acceptance/error-recovery.test.ts +++ b/test/development/acceptance/error-recovery.test.ts @@ -122,7 +122,7 @@ describe('pages/ error recovery', () => { /Count: 1/ ) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) test('logbox: can recover from a event handler error', async () => { @@ -189,7 +189,7 @@ describe('pages/ error recovery', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) @@ -199,7 +199,7 @@ describe('pages/ error recovery', () => { await session.evaluate(() => document.querySelector('p').textContent) ).toBe('Count: 2') - await session.assertNoRedbox() + await session.waitForNoRedbox() }) it('logbox: can recover from a component error', async () => { @@ -342,7 +342,7 @@ describe('pages/ error recovery', () => { ) expect(didNotReload).toBe(true) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect( await session.evaluate(() => document.querySelector('p').textContent) ).toBe('Hello') @@ -725,7 +725,7 @@ describe('pages/ error recovery', () => { ) // Expected: this fixes the problem - await session.assertNoRedbox() + await session.waitForNoRedbox() }) // https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/3#issuecomment-554150098 diff --git a/test/development/acceptance/hydration-error.test.ts b/test/development/acceptance/hydration-error.test.ts index e6cd58f127587e..a6b50da069be52 100644 --- a/test/development/acceptance/hydration-error.test.ts +++ b/test/development/acceptance/hydration-error.test.ts @@ -141,7 +141,7 @@ describe('Error overlay for hydration errors in Pages router', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() expect(await browser.elementByCss('.child').text()).toBe('Value') }) @@ -1175,6 +1175,6 @@ describe('Error overlay for hydration errors in Pages router', () => { ) const { session } = sandbox // FIXME: Should have a redbox just like with App router - await session.assertNoRedbox() + await session.waitForNoRedbox() }) }) diff --git a/test/development/acceptance/server-component-compiler-errors-in-pages.test.ts b/test/development/acceptance/server-component-compiler-errors-in-pages.test.ts index c23cd32cbfc56c..fd9b2066201de8 100644 --- a/test/development/acceptance/server-component-compiler-errors-in-pages.test.ts +++ b/test/development/acceptance/server-component-compiler-errors-in-pages.test.ts @@ -46,7 +46,7 @@ describe('Error Overlay for server components compiler errors in pages', () => { ` ) - await session.assertHasRedbox() + await session.waitForRedbox() await expect(session.getRedboxSource()).resolves.toMatch( /That only works in a Server Component/ ) @@ -130,7 +130,7 @@ describe('Error Overlay for server components compiler errors in pages', () => { ` ) - await session.assertHasRedbox() + await session.waitForRedbox() await expect(session.getRedboxSource()).resolves.toMatch( /That only works in a Server Component/ ) @@ -216,7 +216,7 @@ describe('Error Overlay for server components compiler errors in pages', () => { ` ) - await session.assertHasRedbox() + await session.waitForRedbox() await expect(session.getRedboxSource()).resolves.toMatch( /That only works in a Server Component/ ) @@ -311,7 +311,7 @@ describe('Error Overlay for server components compiler errors in pages', () => { await using sandbox = await createSandbox(next, files) const { session } = sandbox - await session.assertHasRedbox() + await session.waitForRedbox() await expect(session.getRedboxSource()).resolves.toMatch( /That only works in a Server Component/ ) @@ -403,7 +403,7 @@ describe('Error Overlay for server components compiler errors in pages', () => { ` ) - await session.assertHasRedbox() + await session.waitForRedbox() await expect(session.getRedboxSource()).resolves.toMatch( `You're importing a component that needs "${api}". That only works in a Server Component which is not supported in the pages/ directory.` ) @@ -427,7 +427,7 @@ describe('Error Overlay for server components compiler errors in pages', () => { ` ) - await session.assertNoRedbox() + await session.waitForNoRedbox() }) }) }) diff --git a/test/development/app-dir/basic/basic.test.ts b/test/development/app-dir/basic/basic.test.ts index 93d6c0e0341b3a..e277c214c4a6c5 100644 --- a/test/development/app-dir/basic/basic.test.ts +++ b/test/development/app-dir/basic/basic.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' import { waitForHydration } from 'development-sandbox' describe('basic app-dir tests', () => { @@ -12,6 +12,6 @@ describe('basic app-dir tests', () => { await browser.refresh() await waitForHydration(browser) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) diff --git a/test/development/app-dir/cache-components-dev-cache-scope/cache-components-dev-cache-scope.test.ts b/test/development/app-dir/cache-components-dev-cache-scope/cache-components-dev-cache-scope.test.ts index 0aa6a38cfb7b86..bd42324df9cdc1 100644 --- a/test/development/app-dir/cache-components-dev-cache-scope/cache-components-dev-cache-scope.test.ts +++ b/test/development/app-dir/cache-components-dev-cache-scope/cache-components-dev-cache-scope.test.ts @@ -2,7 +2,7 @@ import { nextTestSetup } from 'e2e-utils' import { getRedboxDescription, openRedbox, - assertNoRedbox, + waitForNoRedbox, retry, } from 'next-test-utils' @@ -13,11 +13,11 @@ describe('Cache Components Dev Errors', () => { it('should not show a red box error on the SSR render', async () => { const browser = await next.browser('/cached') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) let latestValue = await browser.elementByCss('#value').text() await browser.refresh() - await assertNoRedbox(browser) + await waitForNoRedbox(browser) let priorValue = latestValue latestValue = await browser.elementByCss('#value').text() @@ -25,7 +25,7 @@ describe('Cache Components Dev Errors', () => { await browser.elementByCss('#refresh').click() await retry(async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) let priorValue = latestValue latestValue = await browser.elementByCss('#value').text() expect(latestValue).not.toBe(priorValue) @@ -33,7 +33,7 @@ describe('Cache Components Dev Errors', () => { await browser.elementByCss('#refresh').click() await retry(async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) let priorValue = latestValue latestValue = await browser.elementByCss('#value').text() expect(latestValue).not.toBe(priorValue) @@ -45,7 +45,7 @@ describe('Cache Components Dev Errors', () => { // await browser.elementByCss('#reload').click() // await retry(async () => { - // await assertNoRedbox(browser) + // await waitForNoRedbox(browser) // let priorValue = latestValue // latestValue = await browser.elementByCss('#value').text() // expect(latestValue).toBe(priorValue) @@ -53,7 +53,7 @@ describe('Cache Components Dev Errors', () => { // await browser.elementByCss('#reload').click() // await retry(async () => { - // await assertNoRedbox(browser) + // await waitForNoRedbox(browser) // let priorValue = latestValue // latestValue = await browser.elementByCss('#value').text() // expect(latestValue).toBe(priorValue) @@ -61,7 +61,7 @@ describe('Cache Components Dev Errors', () => { // await browser.elementByCss('#refresh').click() // await retry(async () => { - // await assertNoRedbox(browser) + // await waitForNoRedbox(browser) // let priorValue = latestValue // latestValue = await browser.elementByCss('#value').text() // expect(latestValue).not.toBe(priorValue) diff --git a/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts b/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts index 9b6f9672a563a6..63d907ee710b8c 100644 --- a/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts +++ b/test/development/app-dir/cache-components-dev-errors/cache-components-dev-errors.test.ts @@ -1,8 +1,8 @@ import stripAnsi from 'strip-ansi' import { nextTestSetup } from 'e2e-utils' import { - assertNoRedbox, - assertNoErrorToast, + waitForNoRedbox, + waitForNoErrorToast, hasErrorToast, retry, } from 'next-test-utils' @@ -44,7 +44,7 @@ describe('Cache Components Dev Errors', () => { }) await browser.elementByCss("[href='/error']").click() - await assertNoErrorToast(browser) + await waitForNoErrorToast(browser) await browser.loadPage(`${next.url}/error`) @@ -175,6 +175,6 @@ describe('Cache Components Dev Errors', () => { } ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) diff --git a/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts b/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts index 137d1d384fc911..8f4e2f93b58357 100644 --- a/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts +++ b/test/development/app-dir/cache-components-dev-fallback-validation/cache-components-dev-fallback-validation.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('Cache Components Fallback Validation', () => { const { isTurbopack, next } = nextTestSetup({ @@ -12,24 +12,24 @@ describe('Cache Components Fallback Validation', () => { const browser = await next.browser( '/complete/prerendered/wrapped/prerendered' ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage(`${next.url}/complete/prerendered/wrapped/novel`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage(`${next.url}/complete/novel/wrapped/novel`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage( `${next.url}/complete/prerendered/unwrapped/prerendered` ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage(`${next.url}/complete/prerendered/unwrapped/novel`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage(`${next.url}/complete/novel/unwrapped/novel`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should warn about missing Suspense when accessing params if static params are partially known at build time', async () => { @@ -38,13 +38,13 @@ describe('Cache Components Fallback Validation', () => { const browser = await next.browser( '/partial/prerendered/wrapped/prerendered' ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage(`${next.url}/partial/prerendered/wrapped/novel`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage(`${next.url}/partial/novel/wrapped/novel`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.loadPage( `${next.url}/partial/prerendered/unwrapped/prerendered` diff --git a/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts index 9fffcd284bb11f..e50b2c5b98e9b4 100644 --- a/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts +++ b/test/development/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, assertNoConsoleErrors } from 'next-test-utils' +import { waitForNoRedbox, assertNoConsoleErrors } from 'next-test-utils' describe('app-dir - capture-console-error-owner-stack', () => { const { next } = nextTestSetup({ @@ -122,7 +122,7 @@ describe('app-dir - capture-console-error-owner-stack', () => { const browser = await next.browser('/browser/error-event') await browser.elementByCss('button').click() - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await assertNoConsoleErrors(browser) }) }) diff --git a/test/development/app-dir/dev-indicator/hide-button.test.ts b/test/development/app-dir/dev-indicator/hide-button.test.ts index 5700b5a5c75407..50d6c98ac37c55 100644 --- a/test/development/app-dir/dev-indicator/hide-button.test.ts +++ b/test/development/app-dir/dev-indicator/hide-button.test.ts @@ -1,8 +1,8 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasDevToolsIndicator, + waitForDevToolsIndicator, assertNoDevToolsIndicator, - openDevToolsIndicatorPopover, + toggleDevToolsIndicatorPopover, waitFor, } from 'next-test-utils' @@ -19,7 +19,7 @@ describe('dev indicator - Hide DevTools Button', () => { it('should show the dev indicator when the server is manually restarted', async () => { const browser = await next.browser('/') - await openDevToolsIndicatorPopover(browser) + await toggleDevToolsIndicatorPopover(browser) await browser.elementByCss('[data-preferences]').click() await browser.elementByCss('[data-hide-dev-tools]').click() @@ -30,13 +30,13 @@ describe('dev indicator - Hide DevTools Button', () => { const browser2 = await next.browser('/') await browser2.refresh() - await assertHasDevToolsIndicator(browser2) + await waitForDevToolsIndicator(browser2) }) it('should still hide the dev indicator after reloading the page', async () => { const browser = await next.browser('/') - await openDevToolsIndicatorPopover(browser) + await toggleDevToolsIndicatorPopover(browser) await browser.elementByCss('[data-preferences]').click() await browser.elementByCss('[data-hide-dev-tools]').click() @@ -52,7 +52,7 @@ describe('dev indicator - Hide DevTools Button', () => { const browser = await next.browser('/') - await openDevToolsIndicatorPopover(browser) + await toggleDevToolsIndicatorPopover(browser) await browser.elementByCss('[data-preferences]').click() await browser.elementByCss('[data-hide-dev-tools]').click() @@ -62,6 +62,6 @@ describe('dev indicator - Hide DevTools Button', () => { await waitFor(COOLDOWN) await browser.refresh() - await assertHasDevToolsIndicator(browser) + await waitForDevToolsIndicator(browser) }) }) diff --git a/test/development/app-dir/dev-indicator/route-type.test.ts b/test/development/app-dir/dev-indicator/route-type.test.ts index 11126e4840a3d3..1e2c60c9077bd5 100644 --- a/test/development/app-dir/dev-indicator/route-type.test.ts +++ b/test/development/app-dir/dev-indicator/route-type.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertStaticIndicator, retry } from 'next-test-utils' +import { waitForStaticIndicator } from 'next-test-utils' describe('app dir dev indicator - route type', () => { const { next } = nextTestSetup({ @@ -9,9 +9,7 @@ describe('app dir dev indicator - route type', () => { it('should have route type as static by default for static page', async () => { const browser = await next.browser('/') - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) it('should have route type as dynamic when changing to dynamic page', async () => { @@ -24,9 +22,7 @@ describe('app dir dev indicator - route type', () => { ) try { - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') } finally { await next.patchFile('app/page.tsx', origContent) } @@ -43,9 +39,7 @@ describe('app dir dev indicator - route type', () => { const browser = await next.browser('/') try { - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') } finally { await next.patchFile('app/page.tsx', origContent) } @@ -56,6 +50,6 @@ describe('app dir dev indicator - route type', () => { await browser.waitForElementByCss('#ready') - await assertStaticIndicator(browser, 'Dynamic') + await waitForStaticIndicator(browser, 'Dynamic') }) }) diff --git a/test/development/app-dir/devtools-position/utils.ts b/test/development/app-dir/devtools-position/utils.ts index 02309d810852a8..be09d57caa73bf 100644 --- a/test/development/app-dir/devtools-position/utils.ts +++ b/test/development/app-dir/devtools-position/utils.ts @@ -1,9 +1,9 @@ import type { Playwright } from '../../../lib/next-webdriver' -import { assertHasDevToolsIndicator } from 'next-test-utils' +import { waitForDevToolsIndicator } from 'next-test-utils' export async function getDevIndicatorPosition(browser: Playwright) { // assert before eval() to prevent race condition - await assertHasDevToolsIndicator(browser) + await waitForDevToolsIndicator(browser) const style = await browser.eval(() => { return ( diff --git a/test/development/app-dir/edge-errors-hmr/index.test.ts b/test/development/app-dir/edge-errors-hmr/index.test.ts index 8c295f09c9d1f0..0b989d60cd55db 100644 --- a/test/development/app-dir/edge-errors-hmr/index.test.ts +++ b/test/development/app-dir/edge-errors-hmr/index.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, assertNoRedbox } from 'next-test-utils' +import { waitForRedbox, waitForNoRedbox } from 'next-test-utils' describe('develop - app-dir - edge errros hmr', () => { const { next } = nextTestSetup({ @@ -14,11 +14,11 @@ describe('develop - app-dir - edge errros hmr', () => { return content.replace('{/* < */}', '<') // uncomment }) - await assertHasRedbox(browser) + await waitForRedbox(browser) await next.patchFile('app/comp.server.js', clientComponentSource) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should recover from build errors when client component error', async () => { @@ -29,10 +29,10 @@ describe('develop - app-dir - edge errros hmr', () => { return content.replace('{/* < */}', '<') // uncomment }) - await assertHasRedbox(browser) + await waitForRedbox(browser) await next.patchFile('app/comp.client.js', clientComponentSource) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) diff --git a/test/development/app-dir/error-overlay/async-client-component/async-client-component.test.ts b/test/development/app-dir/error-overlay/async-client-component/async-client-component.test.ts index f3fb1b6ff61986..fd3fe55555fb31 100644 --- a/test/development/app-dir/error-overlay/async-client-component/async-client-component.test.ts +++ b/test/development/app-dir/error-overlay/async-client-component/async-client-component.test.ts @@ -1,6 +1,6 @@ /* eslint-env jest */ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('app-dir - async-client-component', () => { const { next } = nextTestSetup({ @@ -37,7 +37,7 @@ describe('app-dir - async-client-component', () => { it('app router server component async module', async () => { const browser = await next.browser('/server') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#app-router-value').text()).toBe('hello') }) diff --git a/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts b/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts index 8d9e79072db5a2..0ffd5ecf90aa44 100644 --- a/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts +++ b/test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts @@ -1,6 +1,6 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, getStackFramesContent, toggleCollapseCallStackFrames, } from 'next-test-utils' @@ -12,7 +12,7 @@ describe('error-ignored-frames', () => { it('should be able to collapse ignored frames in server component', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const defaultStack = await getStackFramesContent(browser) expect(defaultStack).toMatchInlineSnapshot(`"at Page (app/page.tsx (2:9))"`) @@ -29,7 +29,7 @@ describe('error-ignored-frames', () => { it('should be able to collapse ignored frames in client component', async () => { const browser = await next.browser('/client') - await assertHasRedbox(browser) + await waitForRedbox(browser) const defaultStack = await getStackFramesContent(browser) expect(defaultStack).toMatchInlineSnapshot( @@ -48,7 +48,7 @@ describe('error-ignored-frames', () => { it('should be able to collapse ignored frames in interleaved call stack', async () => { const browser = await next.browser('/interleaved') - await assertHasRedbox(browser) + await waitForRedbox(browser) const defaultStack = await getStackFramesContent(browser) if (isTurbopack) { @@ -75,7 +75,7 @@ describe('error-ignored-frames', () => { it('should be able to collapse pages router ignored frames', async () => { const browser = await next.browser('/pages') - await assertHasRedbox(browser) + await waitForRedbox(browser) const defaultStack = await getStackFramesContent(browser) expect(defaultStack).toMatchInlineSnapshot( diff --git a/test/development/app-dir/externalize-node-binary-browser-error/externalize-node-binary-browser-error.test.ts b/test/development/app-dir/externalize-node-binary-browser-error/externalize-node-binary-browser-error.test.ts index 8dd9d5e51b5412..34036667500793 100644 --- a/test/development/app-dir/externalize-node-binary-browser-error/externalize-node-binary-browser-error.test.ts +++ b/test/development/app-dir/externalize-node-binary-browser-error/externalize-node-binary-browser-error.test.ts @@ -1,6 +1,6 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, getRedboxDescription, getRedboxSource, } from 'next-test-utils' @@ -13,7 +13,7 @@ describe.skip('externalize-node-binary-browser-error', () => { it('should error when import node binary on browser side', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/development/app-dir/hmr-deleted-page/hmr-deleted-page.test.ts b/test/development/app-dir/hmr-deleted-page/hmr-deleted-page.test.ts index f6cbda6de66303..08ecb1c9fa7664 100644 --- a/test/development/app-dir/hmr-deleted-page/hmr-deleted-page.test.ts +++ b/test/development/app-dir/hmr-deleted-page/hmr-deleted-page.test.ts @@ -1,7 +1,7 @@ import { join } from 'path' import { nextTestSetup, FileRef } from 'e2e-utils' -import { assertHasRedbox, assertNoRedbox } from 'next-test-utils' +import { waitForRedbox, waitForNoRedbox } from 'next-test-utils' import { waitForHydration } from 'development-sandbox' describe('hmr-deleted-page', () => { @@ -19,12 +19,12 @@ describe('hmr-deleted-page', () => { await next.deleteFile('app/page/style.css') await waitForHydration(browser) - await assertHasRedbox(browser) + await waitForRedbox(browser) await next.deleteFile('app/page') await waitForHydration(browser) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('h1').text()).toBe('404') }) }) diff --git a/test/development/app-dir/hmr-move-file/hmr-move-file.test.ts b/test/development/app-dir/hmr-move-file/hmr-move-file.test.ts index d426994c41f49f..17da6bb8cb4b8a 100644 --- a/test/development/app-dir/hmr-move-file/hmr-move-file.test.ts +++ b/test/development/app-dir/hmr-move-file/hmr-move-file.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('HMR Move File', () => { const { next } = nextTestSetup({ @@ -17,7 +17,7 @@ describe('HMR Move File', () => { content.replace('./button', './button2') ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#hello-world-button').text()).toBe( 'hello world' diff --git a/test/development/app-dir/hmr-parallel-routes/hmr-parallel-routes.test.ts b/test/development/app-dir/hmr-parallel-routes/hmr-parallel-routes.test.ts index d6bb67f7682d59..2ea8b3b0752dd8 100644 --- a/test/development/app-dir/hmr-parallel-routes/hmr-parallel-routes.test.ts +++ b/test/development/app-dir/hmr-parallel-routes/hmr-parallel-routes.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('hmr-parallel-routes', () => { const { next } = nextTestSetup({ @@ -15,7 +15,7 @@ describe('hmr-parallel-routes', () => { content.replace('Bar Page', 'Bar Page Updated') ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#bar').text()).toBe('Bar Page Updated') @@ -23,7 +23,7 @@ describe('hmr-parallel-routes', () => { content.replace('Foo Page', 'Foo Page Updated') ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#foo').text()).toBe('Foo Page Updated') }) diff --git a/test/development/app-dir/hmr-shared-css/hmr-shared-css.test.ts b/test/development/app-dir/hmr-shared-css/hmr-shared-css.test.ts index d93e7ccbbc152f..481cba5cf25378 100644 --- a/test/development/app-dir/hmr-shared-css/hmr-shared-css.test.ts +++ b/test/development/app-dir/hmr-shared-css/hmr-shared-css.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('hmr-app-and-pages', () => { const { next } = nextTestSetup({ @@ -21,7 +21,7 @@ describe('hmr-app-and-pages', () => { ) ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect( await browser.elementByCss('body').getComputedCss('background-color') ).toEqual('rgb(255, 0, 0)') @@ -41,7 +41,7 @@ describe('hmr-app-and-pages', () => { ) ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect( await browser.elementByCss('body').getComputedCss('background-color') ).toEqual('rgb(255, 255, 255)') diff --git a/test/development/app-dir/hmr-symlink/hmr-symlink.test.ts b/test/development/app-dir/hmr-symlink/hmr-symlink.test.ts index dc7a4721b86360..1a483afd91e2f2 100644 --- a/test/development/app-dir/hmr-symlink/hmr-symlink.test.ts +++ b/test/development/app-dir/hmr-symlink/hmr-symlink.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, retry } from 'next-test-utils' +import { waitForNoRedbox, retry } from 'next-test-utils' // This tests file symlinks, but not directory symlinks. Directory symlinks are // known to break route manifest generation: @@ -21,7 +21,7 @@ describe('HMR symlinks', () => { (content) => content.replace('symlink target', 'updated symlink target'), async () => { await retry(async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('h1').text()).toBe( 'This is the updated symlink target' ) @@ -47,7 +47,7 @@ describe('HMR symlinks', () => { 'app/symlink-link/page.tsx' ) await retry(async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('h1').text()).toBe( 'This is the second symlink target' ) @@ -77,7 +77,7 @@ describe('HMR symlinks', () => { 'app/symlink-link/page.tsx' ) await retry(async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('h1').text()).toBe( 'This is the second symlink target' ) diff --git a/test/development/app-dir/missing-required-html-tags/index.test.ts b/test/development/app-dir/missing-required-html-tags/index.test.ts index 05b83965371e65..c8a851b31f4248 100644 --- a/test/development/app-dir/missing-required-html-tags/index.test.ts +++ b/test/development/app-dir/missing-required-html-tags/index.test.ts @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getToastErrorCount, hasErrorToast, retry, @@ -12,7 +12,7 @@ describe('app-dir - missing required html tags', () => { it('should display correct error count in dev indicator', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) retry(async () => { expect(await hasErrorToast(browser)).toBe(true) }) @@ -22,7 +22,7 @@ describe('app-dir - missing required html tags', () => { it('should show error overlay', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) await expect(browser).toDisplayRedbox(` { "description": "Missing and tags in the root layout. @@ -93,7 +93,7 @@ describe('app-dir - missing required html tags', () => { retry(() => expect(reloaded).toBe(true), 10_000), ]) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('p').text()).toBe('hello world') // Reintroduce the bug, but only missing html tag @@ -105,6 +105,6 @@ describe('app-dir - missing required html tags', () => { ) // TODO(NDX-768): Should show "missing tags" error - await assertNoRedbox(browser) + await waitForNoRedbox(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 d857062dbf5861..4ca6d2f5c9e075 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 @@ -1,7 +1,7 @@ /* eslint-env jest */ import { nextTestSetup } from 'e2e-utils' import * as Log from './basic/utils/log' -import { assertHasRedbox, getRedboxSource } from '../../../lib/next-test-utils' +import { waitForRedbox, getRedboxSource } from '../../../lib/next-test-utils' import { join } from 'path' describe('after() - invalid usages', () => { @@ -25,7 +25,7 @@ describe('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 waitForRedbox(session) expect(await getRedboxSource(session)).toMatch( /You're importing a component that needs "?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/owner-stack.test.ts b/test/development/app-dir/owner-stack/owner-stack.test.ts index 2420c817aa4e9c..6be3f685f1571b 100644 --- a/test/development/app-dir/owner-stack/owner-stack.test.ts +++ b/test/development/app-dir/owner-stack/owner-stack.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, retry } from 'next-test-utils' +import { waitForNoRedbox, retry } from 'next-test-utils' // These stacks are not sourcemapped and therefore not ignore-listed. // Feel free to update internal frames in assertions. @@ -86,7 +86,7 @@ describe('app-dir - owner-stack', () => { it('should log stitched error for browser caught errors', async () => { const browser = await next.browser('/browser/caught') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const logs = await browser.log() const errorLog = logs.find((log) => { 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 d136d02fe184b5..84caa90c557528 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 @@ -1,6 +1,6 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, getRedboxDescription, getRedboxSource, } from 'next-test-utils' @@ -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 waitForRedbox(browser) 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 39c781bc7cb00f..3eb0c676ebd059 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 @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxDescription, getRedboxSource, } from 'next-test-utils' @@ -40,7 +40,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/app-code/react-dom-server-browser-explicit' ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) if (isTurbopack) { expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(` "{ @@ -108,7 +108,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/app-code/react-dom-server-edge-explicit' ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) if (isTurbopack) { expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(` "{ @@ -258,7 +258,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/app-code/react-dom-server-node-explicit' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -315,7 +315,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/app-code/react-dom-server-node-implicit' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -398,7 +398,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-browser-explicit' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -455,7 +455,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-edge-explicit' ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) if (isTurbopack) { expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(` "{ @@ -527,7 +527,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-edge-implicit' ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) if (isTurbopack) { expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(` "{ @@ -599,7 +599,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-node-explicit' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -656,7 +656,7 @@ describe('react-dom/server in React Server environment', () => { '/exports/library-code/react-dom-server-node-implicit' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/development/app-dir/ssr-only-error/ssr-only-error.test.ts b/test/development/app-dir/ssr-only-error/ssr-only-error.test.ts index 79c7a95b1ec2bc..01e1e57deefb7f 100644 --- a/test/development/app-dir/ssr-only-error/ssr-only-error.test.ts +++ b/test/development/app-dir/ssr-only-error/ssr-only-error.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, hasErrorToast } from 'next-test-utils' +import { waitForNoRedbox, hasErrorToast } from 'next-test-utils' describe('ssr-only-error', () => { const { next } = nextTestSetup({ @@ -30,7 +30,7 @@ describe('ssr-only-error', () => { pushErrorAsConsoleLog: true, }) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await hasErrorToast(browser)).toBe(false) const text = await browser.elementByCss('body').text() diff --git a/test/development/app-dir/use-cache-errors/use-cache-errors.test.ts b/test/development/app-dir/use-cache-errors/use-cache-errors.test.ts index 1c1e556ef76e98..664e83387a6ffd 100644 --- a/test/development/app-dir/use-cache-errors/use-cache-errors.test.ts +++ b/test/development/app-dir/use-cache-errors/use-cache-errors.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from '../../../lib/next-test-utils' +import { waitForNoRedbox } from '../../../lib/next-test-utils' describe('use-cache-errors', () => { const { next } = nextTestSetup({ @@ -12,7 +12,7 @@ describe('use-cache-errors', () => { // statement (`var _s = __turbopack_context__.k.signature`) does not // interfere with our "use cache" directive misplacement detection. const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should show a runtime error when calling the incorrectly used cache function', async () => { diff --git a/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts b/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts index c5edff3febcd15..9ca0904cc3049c 100644 --- a/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts +++ b/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts @@ -1,6 +1,6 @@ import { join } from 'path' import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' // This is implemented in Turbopack, but Turbopack doesn't log the module count. ;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)( @@ -27,7 +27,7 @@ import { assertNoRedbox } from 'next-test-utils' expect($('#typography').text()).toContain('typography') const browser = await next.browser('/mui') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) } diff --git a/test/development/basic/barrel-optimization/barrel-optimization-tremor.test.ts b/test/development/basic/barrel-optimization/barrel-optimization-tremor.test.ts index 0df2022820d584..080de49583caa6 100644 --- a/test/development/basic/barrel-optimization/barrel-optimization-tremor.test.ts +++ b/test/development/basic/barrel-optimization/barrel-optimization-tremor.test.ts @@ -1,6 +1,6 @@ import { join } from 'path' import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('optimizePackageImports - mui', () => { const { next } = nextTestSetup({ @@ -20,6 +20,6 @@ describe('optimizePackageImports - mui', () => { it('should work', async () => { // Without barrel optimization, the reproduction breaks. const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(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 424a8ac38d17f7..f96b3cfa7ee08b 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 @@ -3,7 +3,7 @@ import { join } from 'path' import webdriver from 'next-webdriver' import { createNext, FileRef } from 'e2e-utils' -import { assertNoRedbox, check } from 'next-test-utils' +import { waitForNoRedbox, check } from 'next-test-utils' import { NextInstance } from 'e2e-utils' const installCheckVisible = (browser) => { @@ -292,7 +292,7 @@ describe('GS(S)P Server-Side Change Reloading', () => { `) await next.patchFile(page, originalContent) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { await next.patchFile(page, originalContent) } @@ -333,7 +333,7 @@ describe('GS(S)P Server-Side Change Reloading', () => { expect(next.cliOutput).toMatch(/custom oops/) await next.patchFile(page, originalContent) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { await next.patchFile(page, originalContent) } diff --git a/test/development/basic/hmr/run-basic-hmr-test.util.ts b/test/development/basic/hmr/run-basic-hmr-test.util.ts index e3da81a94f954f..76589dd2e2a22a 100644 --- a/test/development/basic/hmr/run-basic-hmr-test.util.ts +++ b/test/development/basic/hmr/run-basic-hmr-test.util.ts @@ -1,5 +1,5 @@ import { - assertHasRedbox, + waitForRedbox, getBrowserBodyText, retry, waitFor, @@ -57,7 +57,7 @@ export function runBasicHmrTest(nextConfig: { 'pages/auto-export-is-ready.js', (content) => `import hello from 'non-existent'\n` + content, async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) await waitFor(3000) outputLength = next.cliOutput.length } diff --git a/test/development/basic/hmr/run-error-recovery-hmr-test.util.ts b/test/development/basic/hmr/run-error-recovery-hmr-test.util.ts index 1466fbdb69648f..9ba3841acf4a7a 100644 --- a/test/development/basic/hmr/run-error-recovery-hmr-test.util.ts +++ b/test/development/basic/hmr/run-error-recovery-hmr-test.util.ts @@ -1,7 +1,7 @@ import { join } from 'path' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getBrowserBodyText, getRedboxHeader, getRedboxDescription, @@ -156,7 +156,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { join('pages', 'hmr', 'about2.js'), (content) => content.replace('', 'div'), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) const source = next.normalizeTestDirContent( await getRedboxSource(browser) ) @@ -247,7 +247,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { // Ensure dev server has time to break: await new Promise((resolve) => setTimeout(resolve, 2000)) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toContain( "Expected ''" ) @@ -275,7 +275,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { join('pages', 'hmr', 'about3.js'), (content) => content.replace('export', 'aa=20;\nexport'), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch(/aa is not defined/) } ) @@ -304,7 +304,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { 'throw new Error("an-expected-error");\nreturn' ), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toMatch(/an-expected-error/) } ) @@ -333,7 +333,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { 'export default {};\nexport const fn =' ), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toMatchInlineSnapshot( `"The default export is not a React Component in page: "/hmr/about5""` ) @@ -364,7 +364,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { 'export default () => /search/;\nexport const fn =' ), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) // TODO: Replace this when webpack 5 is the default expect(await getRedboxHeader(browser)).toMatch( `Objects are not valid as a React child (found: [object RegExp]). If you meant to render a collection of children, use an array instead.` @@ -397,7 +397,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { 'export default undefined;\nexport const fn =' ), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toMatchInlineSnapshot( `"The default export is not a React Component in page: "/hmr/about7""` ) @@ -409,7 +409,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { /This is the about page/ ) }) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should recover after webpack parse error in an imported file', async () => { @@ -429,7 +429,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { 'import "../../components/parse-error.xyz"\nexport default' ), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch('Build Error') if (process.env.IS_TURBOPACK_TEST) { @@ -486,7 +486,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { /This is the about page/ ) }) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should recover after loader parse error in an imported file', async () => { @@ -506,7 +506,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { 'import "../../components/parse-error.js"\nexport default' ), async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch('Build Error') let redboxSource = await getRedboxSource(browser) @@ -585,7 +585,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { /This is the about page/ ) }) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should recover from errors in getInitialProps in client', async () => { @@ -594,7 +594,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { const errorContent = await next.readFile(erroredPage) await browser.elementByCss('#error-in-gip-link').click() - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toMatchInlineSnapshot( `"an-expected-error-in-gip"` ) @@ -626,7 +626,7 @@ export function runErrorRecoveryHmrTest(nextConfig: { it('should recover after an error reported via SSR', async () => { const browser = await next.browser(basePath + '/hmr/error-in-gip') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toMatchInlineSnapshot( `"an-expected-error-in-gip"` ) diff --git a/test/development/basic/next-dynamic/next-dynamic.test.ts b/test/development/basic/next-dynamic/next-dynamic.test.ts index 3b84350601b5d4..2bb60a0d72a52d 100644 --- a/test/development/basic/next-dynamic/next-dynamic.test.ts +++ b/test/development/basic/next-dynamic/next-dynamic.test.ts @@ -2,7 +2,7 @@ import { join } from 'path' import cheerio from 'cheerio' import webdriver from 'next-webdriver' import { createNext, FileRef } from 'e2e-utils' -import { assertNoRedbox, renderViaHTTP, check } from 'next-test-utils' +import { waitForNoRedbox, renderViaHTTP, check } from 'next-test-utils' import { NextInstance } from 'e2e-utils' const customDocumentGipContent = `\ @@ -170,7 +170,7 @@ describe('next/dynamic', () => { try { browser = await webdriver(next.url, basePath + '/dynamic/no-ssr') await check(() => browser.elementByCss('body').text(), /navigator/) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { if (browser) { await browser.close() @@ -183,7 +183,7 @@ describe('next/dynamic', () => { try { browser = await webdriver(next.url, basePath + '/dynamic/no-ssr-esm') await check(() => browser.elementByCss('body').text(), /esm.mjs/) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { if (browser) { await browser.close() diff --git a/test/development/basic/project-directory-rename.test.ts b/test/development/basic/project-directory-rename.test.ts index 69f77a2b2e3810..ccb43a45a3790d 100644 --- a/test/development/basic/project-directory-rename.test.ts +++ b/test/development/basic/project-directory-rename.test.ts @@ -1,6 +1,6 @@ import fs from 'fs-extra' import webdriver from 'next-webdriver' -import { assertNoRedbox, check, findPort } from 'next-test-utils' +import { waitForNoRedbox, check, findPort } from 'next-test-utils' import { NextInstance } from 'e2e-utils' import { createNext } from 'e2e-utils' import stripAnsi from 'strip-ansi' @@ -42,7 +42,7 @@ describe.skip('Project Directory Renaming', () => { await check(async () => { return (await browser.eval('window.beforeNav')) === 1 ? 'pending' : 'done' }, 'done') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) try { // should still HMR correctly diff --git a/test/development/client-dev-overlay/index.test.ts b/test/development/client-dev-overlay/index.test.ts index d7995665fd2cde..379bf5bdcf37ce 100644 --- a/test/development/client-dev-overlay/index.test.ts +++ b/test/development/client-dev-overlay/index.test.ts @@ -2,7 +2,7 @@ import { FileRef } from 'e2e-utils' import { Playwright } from 'next-webdriver' import { nextTestSetup } from 'e2e-utils' import { join } from 'path' -import { assertHasDevToolsIndicator, retry } from 'next-test-utils' +import { waitForDevToolsIndicator, retry } from 'next-test-utils' describe('client-dev-overlay', () => { const { next, isTurbopack } = nextTestSetup({ @@ -124,8 +124,8 @@ describe('client-dev-overlay', () => { it('should nudge to use Turbopack unless Turbopack is disabled', async () => { const browser = await next.browser('/') - // Don't use openDevToolsIndicatorPopover because this is asserting something in the old dev tools menu which isn't preset yet in the new UI. - const devToolsIndicator = await assertHasDevToolsIndicator(browser) + // Don't use toggleDevToolsIndicatorPopover because this is asserting something in the old dev tools menu which isn't preset yet in the new UI. + const devToolsIndicator = await waitForDevToolsIndicator(browser) try { await devToolsIndicator.click() } catch (cause) { @@ -175,7 +175,7 @@ describe('client-dev-overlay with Cache Components', () => { it('should show Cache Components as enabled in the devtools menu', async () => { const browser = await next.browser('/') - const devToolsIndicator = await assertHasDevToolsIndicator(browser) + const devToolsIndicator = await waitForDevToolsIndicator(browser) try { await devToolsIndicator.click() } catch (cause) { diff --git a/test/development/dev-indicator/dev-indicator.test.ts b/test/development/dev-indicator/dev-indicator.test.ts index 809284e49f2c56..fd3724640dacc1 100644 --- a/test/development/dev-indicator/dev-indicator.test.ts +++ b/test/development/dev-indicator/dev-indicator.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertStaticIndicator, retry } from 'next-test-utils' +import { waitForStaticIndicator } from 'next-test-utils' const withCacheComponents = process.env.__NEXT_CACHE_COMPONENTS === 'true' @@ -12,39 +12,29 @@ describe('dev indicator - route type', () => { it('should update when going from dynamic -> static', async () => { const browser = await next.browser('/pages/gssp') - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') // validate static -> dynamic updates await browser.elementByCss("[href='/pages']").click() - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) it('should update when going from static -> dynamic', async () => { const browser = await next.browser('/pages') - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') // validate static -> dynamic updates await browser.elementByCss("[href='/pages/gssp']").click() - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') }) it('should be marked dynamic on first load', async () => { const browser = await next.browser('/pages/gssp') - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') }) }) @@ -52,37 +42,27 @@ describe('dev indicator - route type', () => { it('should be marked dynamic on first load', async () => { const browser = await next.browser('/pages/gip') - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') }) it('should update when going from dynamic -> static', async () => { const browser = await next.browser('/pages/gip') - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') await browser.elementByCss("[href='/pages']").click() - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) it('should update when going from static -> dynamic', async () => { const browser = await next.browser('/pages') - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') await browser.elementByCss("[href='/pages/gip']").click() - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') }) }) @@ -90,32 +70,24 @@ describe('dev indicator - route type', () => { it('should be marked static on first load', async () => { const browser = await next.browser('/pages/pregenerated') - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) it('should update when going from dynamic -> static', async () => { const browser = await next.browser('/pages/gssp') - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') await browser.elementByCss("[href='/pages/pregenerated']").click() - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) }) it('should have route type as static by default for static page', async () => { const browser = await next.browser('/pages') - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) describe('with App Router', () => { @@ -124,18 +96,16 @@ describe('dev indicator - route type', () => { describe('with Cache Components enabled', () => { it('should not show a static indicator', async () => { const browser = await next.browser('/app/static-indicator/dynamic') - await assertStaticIndicator(browser, undefined) + await waitForStaticIndicator(browser, undefined) }) it('should still show a static indicator when navigating to a Pages Router page', async () => { const browser = await next.browser('/app/static-indicator/dynamic') - await assertStaticIndicator(browser, undefined) + await waitForStaticIndicator(browser, undefined) await browser.elementByCss("[href='/pages']").click() - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) }) } else { @@ -143,25 +113,19 @@ describe('dev indicator - route type', () => { it('should be marked dynamic on first load', async () => { const browser = await next.browser('/app/static-indicator/dynamic') - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') }) it('should update when going from dynamic -> static', async () => { const browser = await next.browser('/app/static-indicator/dynamic') - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') await browser .elementByCss("[href='/app/static-indicator/static']") .click() - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) }) } @@ -172,18 +136,16 @@ describe('dev indicator - route type', () => { describe('with Cache Components enabled', () => { it('should not show a static indicator', async () => { const browser = await next.browser('/app/static-indicator/static') - await assertStaticIndicator(browser, undefined) + await waitForStaticIndicator(browser, undefined) }) it('should still show a static indicator when navigating to a Pages Router page', async () => { const browser = await next.browser('/app/static-indicator/static') - await assertStaticIndicator(browser, undefined) + await waitForStaticIndicator(browser, undefined) await browser.elementByCss("[href='/pages/gssp']").click() - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') }) }) } else { @@ -191,25 +153,19 @@ describe('dev indicator - route type', () => { it('should be marked static on first load', async () => { const browser = await next.browser('/app/static-indicator/static') - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') }) it('should update when going from static -> dynamic', async () => { const browser = await next.browser('/app/static-indicator/static') - await retry(async () => { - await assertStaticIndicator(browser, 'Static') - }) + await waitForStaticIndicator(browser, 'Static') await browser .elementByCss("[href='/app/static-indicator/dynamic']") .click() - await retry(async () => { - await assertStaticIndicator(browser, 'Dynamic') - }) + await waitForStaticIndicator(browser, 'Dynamic') }) }) } diff --git a/test/development/error-overlay/index.test.tsx b/test/development/error-overlay/index.test.tsx index 79ef277bade5c7..b56e2a36c5543b 100644 --- a/test/development/error-overlay/index.test.tsx +++ b/test/development/error-overlay/index.test.tsx @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox } from 'next-test-utils' +import { waitForRedbox } from 'next-test-utils' describe('DevErrorOverlay', () => { const { next } = nextTestSetup({ @@ -86,7 +86,7 @@ describe('DevErrorOverlay', () => { }, }) - await assertHasRedbox(browser) + await waitForRedbox(browser) await browser.waitForIdleNetwork() // Verify woff2 files were requested and loaded successfully @@ -99,7 +99,7 @@ describe('DevErrorOverlay', () => { it('should load dev overlay styles successfully', async () => { const browser = await next.browser('/hydration-error') - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = browser.locateRedbox() // check the data-nextjs-dialog-header="true" DOM element styles under redbox is applied diff --git a/test/development/jsconfig-path-reloading/index.test.ts b/test/development/jsconfig-path-reloading/index.test.ts index cff7731d3672e6..3eebdc74bac9ef 100644 --- a/test/development/jsconfig-path-reloading/index.test.ts +++ b/test/development/jsconfig-path-reloading/index.test.ts @@ -1,8 +1,8 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, check, renderViaHTTP, getRedboxSource, @@ -82,7 +82,7 @@ describe('jsconfig-path-reloading', () => { )}` ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toContain('"@lib/second-data"') await next.patchFile( @@ -103,7 +103,7 @@ describe('jsconfig-path-reloading', () => { ) ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const html2 = await browser.eval('document.documentElement.innerHTML') expect(html2).toContain('first button') @@ -158,7 +158,7 @@ describe('jsconfig-path-reloading', () => { indexContent.replace('@mybutton', '@myotherbutton') ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { const html2 = await browser.eval('document.documentElement.innerHTML') diff --git a/test/development/middleware-errors/index.test.ts b/test/development/middleware-errors/index.test.ts index 6c560357761e82..a364d54953a91d 100644 --- a/test/development/middleware-errors/index.test.ts +++ b/test/development/middleware-errors/index.test.ts @@ -1,4 +1,4 @@ -import { assertNoRedbox, check, getDistDir, retry } from 'next-test-utils' +import { waitForNoRedbox, check, getDistDir, retry } from 'next-test-utils' import stripAnsi from 'strip-ansi' import { nextTestSetup } from 'e2e-utils' @@ -98,7 +98,7 @@ describe('middleware - development errors', () => { await next.patchFile('middleware.js', `export default function () {}`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) @@ -149,7 +149,7 @@ describe('middleware - development errors', () => { it('does not render the error', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#page-title')).toBeTruthy() }) }) @@ -269,7 +269,7 @@ describe('middleware - development errors', () => { expect(next.cliOutput.slice(lengthOfLogs)).toContain('GET / 200') }, 10000) // middleware rebuild takes a while in CI - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) @@ -375,7 +375,7 @@ describe('middleware - development errors', () => { await next.patchFile('middleware.js', `export default function () {}`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) @@ -410,7 +410,7 @@ describe('middleware - development errors', () => { it('does not render the error', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#page-title')).toBeTruthy() }) }) @@ -448,7 +448,7 @@ describe('middleware - development errors', () => { it('does not render the error', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#page-title')).toBeTruthy() }) }) @@ -529,7 +529,7 @@ describe('middleware - development errors', () => { await next.patchFile('middleware.js', `export default function () {}`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#page-title')).toBeTruthy() }) }) @@ -557,7 +557,7 @@ describe('middleware - development errors', () => { it('renders the error correctly and recovers', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await next.patchFile('middleware.js', `export default function () }`) @@ -615,7 +615,7 @@ describe('middleware - development errors', () => { await next.patchFile('middleware.js', `export default function () {}`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('#page-title')).toBeTruthy() }) }) diff --git a/test/development/next-font/build-errors.test.ts b/test/development/next-font/build-errors.test.ts index 875d0aa416028a..8be590ed199424 100644 --- a/test/development/next-font/build-errors.test.ts +++ b/test/development/next-font/build-errors.test.ts @@ -3,8 +3,8 @@ import { NextInstance } from 'e2e-utils' import { join } from 'path' import webdriver from 'next-webdriver' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxSource, } from 'next-test-utils' @@ -36,7 +36,7 @@ export default function Page() { ` ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` "app/page.js \`next/font\` error: @@ -44,7 +44,7 @@ export default function Page() { `) await next.patchFile('app/page.js', content) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it("should show a module not found error if local font file can' be resolved", async () => { @@ -64,7 +64,7 @@ export default function Page() { ` ) - await assertHasRedbox(browser) + await waitForRedbox(browser) const sourceLines = (await getRedboxSource(browser)).split('\n') // Should display the file name correctly @@ -75,6 +75,6 @@ export default function Page() { ) await next.patchFile('app/page.js', content) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) 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 f1a0018010856c..21ef5e99269485 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 @@ -1,6 +1,6 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' import webdriver from 'next-webdriver' import { join } from 'path' @@ -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 waitForRedbox(browser) if (process.env.IS_TURBOPACK_TEST) { // TODO: Turbopack doesn't include pages/ expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` diff --git a/test/development/pages-dir/client-navigation/foreign-history-manipulation.test.ts b/test/development/pages-dir/client-navigation/foreign-history-manipulation.test.ts index ad09e4ffa9838c..6c102782c9d4e5 100644 --- a/test/development/pages-dir/client-navigation/foreign-history-manipulation.test.ts +++ b/test/development/pages-dir/client-navigation/foreign-history-manipulation.test.ts @@ -1,6 +1,6 @@ /* eslint-env jest */ -import { assertNoRedbox, waitFor } from 'next-test-utils' +import { waitForNoRedbox, waitFor } from 'next-test-utils' import path from 'path' import { nextTestSetup } from 'e2e-utils' @@ -22,7 +22,7 @@ describe('Client navigation with foreign history manipulation', () => { await browser.waitForElementByCss('.nav-about') await browser.back() await waitFor(1000) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should ignore history state with an invalid url', async () => { @@ -35,7 +35,7 @@ describe('Client navigation with foreign history manipulation', () => { await browser.waitForElementByCss('.nav-about') await browser.back() await waitFor(1000) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should ignore foreign history state with missing properties', async () => { @@ -46,6 +46,6 @@ describe('Client navigation with foreign history manipulation', () => { await browser.waitForElementByCss('.nav-about') await browser.back() await waitFor(1000) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) diff --git a/test/development/repeated-dev-edits/repeated-dev-edits.test.ts b/test/development/repeated-dev-edits/repeated-dev-edits.test.ts index adc64bcab1bf5c..84330246ac1aa0 100644 --- a/test/development/repeated-dev-edits/repeated-dev-edits.test.ts +++ b/test/development/repeated-dev-edits/repeated-dev-edits.test.ts @@ -1,6 +1,6 @@ import { nextTestSetup } from 'e2e-utils' import fs from 'fs-extra' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' import path from 'path' describe('repeated-dev-edits', () => { @@ -25,7 +25,7 @@ describe('repeated-dev-edits', () => { expect(await browser.elementByCss('p').text()).toBe('version-2') // Verify no hydration mismatch: - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await next.patchFile( pagePath, @@ -35,11 +35,11 @@ describe('repeated-dev-edits', () => { expect(await browser.elementByCss('p').text()).toBe('version-3') // Verify no hydration mismatch: - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.refresh() // Verify no hydration mismatch: - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) diff --git a/test/development/sass-error/index.test.ts b/test/development/sass-error/index.test.ts index f75e8f4d37422c..38a644cc72bdcc 100644 --- a/test/development/sass-error/index.test.ts +++ b/test/development/sass-error/index.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' describe('app dir - css', () => { const { next, skipped } = nextTestSetup({ @@ -21,7 +21,7 @@ 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 waitForRedbox(browser) const source = await getRedboxSource(browser) // css-loader does not report an error for this case diff --git a/test/development/tsconfig-path-reloading/index.test.ts b/test/development/tsconfig-path-reloading/index.test.ts index 03b30c371f582a..dac23bc38a41db 100644 --- a/test/development/tsconfig-path-reloading/index.test.ts +++ b/test/development/tsconfig-path-reloading/index.test.ts @@ -1,8 +1,8 @@ import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, check, renderViaHTTP, getRedboxSource, @@ -82,7 +82,7 @@ describe('tsconfig-path-reloading', () => { )}` ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toContain("'@lib/second-data'") await next.patchFile( @@ -103,7 +103,7 @@ describe('tsconfig-path-reloading', () => { ) ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const html2 = await browser.eval('document.documentElement.innerHTML') expect(html2).toContain('first button') @@ -158,7 +158,7 @@ describe('tsconfig-path-reloading', () => { indexContent.replace('@mybutton', '@myotherbutton') ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { const html2 = await browser.eval('document.documentElement.innerHTML') diff --git a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts index 6a7e6bb126f18b..c3df994447d2ca 100644 --- a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts +++ b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, retry } from 'next-test-utils' +import { waitForNoRedbox, retry } from 'next-test-utils' describe('app-dir - action-in-pages-router', () => { const { next, isNextStart } = nextTestSetup({ @@ -17,7 +17,7 @@ describe('app-dir - action-in-pages-router', () => { .join('') // This is a fake server action, a simple function so it can still work expect(browserLogText).toContain('action:foo') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) diff --git a/test/e2e/app-dir/actions/app-action.test.ts b/test/e2e/app-dir/actions/app-action.test.ts index 011bee4e772026..8a29367f1b3b7e 100644 --- a/test/e2e/app-dir/actions/app-action.test.ts +++ b/test/e2e/app-dir/actions/app-action.test.ts @@ -1,6 +1,6 @@ import { FileRef, nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, retry, waitFor, getRedboxSource, @@ -995,7 +995,7 @@ describe('app-dir action handling', () => { origContent + '\n\nexport const foo = 1' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toContain( 'Only async functions are allowed to be exported in a "use server" file.' ) diff --git a/test/e2e/app-dir/app-compilation/index.test.ts b/test/e2e/app-dir/app-compilation/index.test.ts index 7a369882d4de67..a0eef396de5a1f 100644 --- a/test/e2e/app-dir/app-compilation/index.test.ts +++ b/test/e2e/app-dir/app-compilation/index.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, retry } from 'next-test-utils' +import { waitForNoRedbox, retry } from 'next-test-utils' describe('app dir', () => { const { next, isNextDev, isNextStart, skipped } = nextTestSetup({ @@ -43,7 +43,7 @@ describe('app dir', () => { }) // It should not have an error - await assertNoRedbox(browser) + await waitForNoRedbox(browser) // HMR should still work await next.patchFile( diff --git a/test/e2e/app-dir/app-external/app-external.test.ts b/test/e2e/app-dir/app-external/app-external.test.ts index fb39ca3b10bff7..07df04df8dae4c 100644 --- a/test/e2e/app-dir/app-external/app-external.test.ts +++ b/test/e2e/app-dir/app-external/app-external.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, check, getDistDir, retry } from 'next-test-utils' +import { waitForNoRedbox, check, getDistDir, retry } from 'next-test-utils' async function resolveStreamResponse(response: any, onData?: any) { let result = '' @@ -249,7 +249,7 @@ describe('app dir - external dependency', () => { expect($('#transpile-cjs-lib').text()).toBe('transpile-cjs-lib') const browser = await next.browser('/cjs/client') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should export client module references in esm', async () => { diff --git a/test/e2e/app-dir/app-root-params-getters/simple.test.ts b/test/e2e/app-dir/app-root-params-getters/simple.test.ts index 2c9d11374714dd..ea887655048adb 100644 --- a/test/e2e/app-dir/app-root-params-getters/simple.test.ts +++ b/test/e2e/app-dir/app-root-params-getters/simple.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, retry } from 'next-test-utils' +import { waitForNoRedbox, retry } from 'next-test-utils' import { join } from 'path' import { createSandbox } from 'development-sandbox' import { outdent } from 'outdent' @@ -70,7 +70,7 @@ describe('app-root-param-getters - simple', () => { 'This page could not be found.' ) if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } }) diff --git a/test/e2e/app-dir/app-root-params-getters/use-cache.test.ts b/test/e2e/app-dir/app-root-params-getters/use-cache.test.ts index 55674b4f6b95f1..26ab66b1e86737 100644 --- a/test/e2e/app-dir/app-root-params-getters/use-cache.test.ts +++ b/test/e2e/app-dir/app-root-params-getters/use-cache.test.ts @@ -1,6 +1,6 @@ import { nextTestSetup } from 'e2e-utils' import { join } from 'path' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('app-root-param-getters - cache - at runtime', () => { const { next, isNextDev, skipped } = nextTestSetup({ @@ -72,7 +72,7 @@ describe('app-root-param-getters - private cache', () => { it('should allow using root params within a "use cache: private" - dev', async () => { const browser = await next.browser('/en/us/use-cache-private') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementById('param').text()).toBe('en us') }) } else { diff --git a/test/e2e/app-dir/cache-components-create-component-tree/cache-components-create-component-tree.test.ts b/test/e2e/app-dir/cache-components-create-component-tree/cache-components-create-component-tree.test.ts index 3daac670ff197c..cbf3872ae8293b 100644 --- a/test/e2e/app-dir/cache-components-create-component-tree/cache-components-create-component-tree.test.ts +++ b/test/e2e/app-dir/cache-components-create-component-tree/cache-components-create-component-tree.test.ts @@ -1,5 +1,5 @@ import { isNextDev, nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('hello-world', () => { const { next } = nextTestSetup({ @@ -11,7 +11,7 @@ describe('hello-world', () => { if (isNextDev) { it('should not indicate there is an error when incidental math.random calls occur during component tree generation during dev', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) // The redbox assertion is currently unreliable in this test and so this is an additional check to ensure the CLI didn't print anything with `Math.random()` in it. expect(next.cliOutput).not.toContain('Math.random()') diff --git a/test/e2e/app-dir/cache-components-dynamic-imports/cache-components-dynamic-imports.test.ts b/test/e2e/app-dir/cache-components-dynamic-imports/cache-components-dynamic-imports.test.ts index 5ea97810371435..bbd22b79b982ea 100644 --- a/test/e2e/app-dir/cache-components-dynamic-imports/cache-components-dynamic-imports.test.ts +++ b/test/e2e/app-dir/cache-components-dynamic-imports/cache-components-dynamic-imports.test.ts @@ -1,6 +1,6 @@ import * as path from 'path' import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, retry } from 'next-test-utils' +import { waitForNoRedbox, retry } from 'next-test-utils' describe('async imports in cacheComponents', () => { const { next, isNextStart, isNextDev } = nextTestSetup({ @@ -62,7 +62,7 @@ describe('async imports in cacheComponents', () => { if (isNextDev) { await retry(async () => { // we shouldn't get any errors from `spawnDynamicValidationInDev` - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) } } diff --git a/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts b/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts index 454ec2f8f54a5a..939b7a41b44afe 100644 --- a/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts +++ b/test/e2e/app-dir/cache-components-errors/cache-components-errors.test.ts @@ -1,5 +1,5 @@ import { isNextDev, nextTestSetup } from 'e2e-utils' -import { assertNoErrorToast } from 'next-test-utils' +import { waitForNoErrorToast } from 'next-test-utils' import { getPrerenderOutput } from './utils' describe('Cache Components Errors', () => { @@ -350,7 +350,7 @@ describe('Cache Components Errors', () => { if (isNextDev) { it('should not show a collapsed redbox error', async () => { const browser = await next.browser(pathname) - await assertNoErrorToast(browser) + await waitForNoErrorToast(browser) }) } else { it('should partially prerender when all dynamic components are inside a Suspense boundary', async () => { @@ -513,7 +513,7 @@ describe('Cache Components Errors', () => { if (isNextDev) { it('should not show a collapsed redbox error', async () => { const browser = await next.browser(pathname) - await assertNoErrorToast(browser) + await waitForNoErrorToast(browser) }) } else { it('should not error the build when all routes are static', async () => { @@ -820,7 +820,7 @@ describe('Cache Components Errors', () => { if (isNextDev) { it('should not show a collapsed redbox error', async () => { const browser = await next.browser(pathname) - await assertNoErrorToast(browser) + await waitForNoErrorToast(browser) }) } else { it('should partially prerender when all dynamic components are inside a Suspense boundary', async () => { @@ -1870,7 +1870,7 @@ describe('Cache Components Errors', () => { if (isNextDev) { it('does not show a validation error in the dev overlay', async () => { const browser = await next.browser(pathname) - await assertNoErrorToast(browser) + await waitForNoErrorToast(browser) }) } else { it('should not error the build sync IO is used inside a Suspense Boundary in a client Component and nothing else is dynamic', async () => { diff --git a/test/e2e/app-dir/cache-components-route-handler-errors/cache-components-route-handler-errors.test.ts b/test/e2e/app-dir/cache-components-route-handler-errors/cache-components-route-handler-errors.test.ts index 19c293725d9fef..3ecebbe890b269 100644 --- a/test/e2e/app-dir/cache-components-route-handler-errors/cache-components-route-handler-errors.test.ts +++ b/test/e2e/app-dir/cache-components-route-handler-errors/cache-components-route-handler-errors.test.ts @@ -1,6 +1,6 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, getRedboxDescription, getRedboxSource, } from 'next-test-utils' @@ -26,7 +26,7 @@ describe('cache-components-route-handler-errors', () => { if (isNextDev) { // Test the first route handler with "dynamic" config const browser = await next.browser('/route-with-dynamic') - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/e2e/app-dir/cache-components-segment-configs/cache-components-edge-deduplication.test.ts b/test/e2e/app-dir/cache-components-segment-configs/cache-components-edge-deduplication.test.ts index a62a89b4fb5002..893920ef4ed8b9 100644 --- a/test/e2e/app-dir/cache-components-segment-configs/cache-components-edge-deduplication.test.ts +++ b/test/e2e/app-dir/cache-components-segment-configs/cache-components-edge-deduplication.test.ts @@ -3,7 +3,7 @@ import { nextTestSetup } from 'e2e-utils' // Only Turbopack runs the transform on the layout once in edge and non-edge contexts // so we only test this on Turbopack import { - assertHasRedbox, + waitForRedbox, getRedboxDescription, getRedboxSource, } from 'next-test-utils' @@ -29,7 +29,7 @@ import { if (isNextDev) { const browser = await next.browser('/edge-with-layout/edge') - assertHasRedbox(browser) + waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/e2e/app-dir/cache-components-segment-configs/cache-components-segment-configs.test.ts b/test/e2e/app-dir/cache-components-segment-configs/cache-components-segment-configs.test.ts index 2188e7f9646d51..e18bb074bef598 100644 --- a/test/e2e/app-dir/cache-components-segment-configs/cache-components-segment-configs.test.ts +++ b/test/e2e/app-dir/cache-components-segment-configs/cache-components-segment-configs.test.ts @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { retry, - assertHasRedbox, + waitForRedbox, getRedboxDescription, getRedboxSource, } from 'next-test-utils' @@ -26,7 +26,7 @@ describe('cache-components-segment-configs', () => { if (isNextDev) { const browser = await next.browser('/revalidate') - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), @@ -87,7 +87,7 @@ describe('cache-components-segment-configs', () => { if (isNextDev) { const browser = await next.browser('/revalidate') - await assertHasRedbox(browser) + await waitForRedbox(browser) const redbox = { description: await getRedboxDescription(browser), source: await getRedboxSource(browser), diff --git a/test/e2e/app-dir/cache-components/cache-components.server-action.test.ts b/test/e2e/app-dir/cache-components/cache-components.server-action.test.ts index 5f7e96080e8f35..c716dd1d144946 100644 --- a/test/e2e/app-dir/cache-components/cache-components.server-action.test.ts +++ b/test/e2e/app-dir/cache-components/cache-components.server-action.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox, retry } from 'next-test-utils' +import { waitForNoRedbox, retry } from 'next-test-utils' describe('cache-components', () => { const { next, isNextDev } = nextTestSetup({ @@ -32,7 +32,7 @@ describe('cache-components', () => { // we expect this error not to be logged anymore. expect(next.cliOutput).toMatch('Error: Route "/server-action-inline"') - await assertNoRedbox(browser) + await waitForNoRedbox(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 af6f72ea1eb539..e0034f2d478c75 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 @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxSource, retry, } from 'next-test-utils' @@ -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 waitForRedbox(browser) if (process.env.IS_TURBOPACK_TEST) { expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` @@ -82,7 +82,7 @@ describe('app-dir - error-on-next-codemod-comment', () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) // Recover the original file content await next.patchFile('app/page.tsx', originFileContent) @@ -91,7 +91,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 waitForRedbox(browser) let originFileContent await next.patchFile('app/page.tsx', (code) => { @@ -103,7 +103,7 @@ describe('app-dir - error-on-next-codemod-comment', () => { }) await retry(async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) // Recover the original file content @@ -113,7 +113,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 waitForRedbox(browser) let originFileContent await next.patchFile('app/page.tsx', (code) => { @@ -122,7 +122,7 @@ describe('app-dir - error-on-next-codemod-comment', () => { }) await retry(async () => { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) // Recover the original file content diff --git a/test/e2e/app-dir/errors/index.test.ts b/test/e2e/app-dir/errors/index.test.ts index b0f263d43c5377..07c20e7bde85d1 100644 --- a/test/e2e/app-dir/errors/index.test.ts +++ b/test/e2e/app-dir/errors/index.test.ts @@ -27,7 +27,7 @@ describe('app-dir - errors', () => { if (isNextDev) { // TODO: investigate desired behavior here as it is currently // minimized by default - // await assertHasRedbox(browser) + // await waitForRedbox(browser) // expect(await getRedboxHeader(browser)).toMatch(/this is a test/) } else { expect( @@ -63,7 +63,7 @@ describe('app-dir - errors', () => { if (isNextDev) { // TODO-APP: ensure error overlay is shown for errors that happened before/during hydration - // await assertHasRedbox(browser) + // await waitForRedbox(browser) // expect(await getRedboxHeader(browser)).toMatch(/this is a test/) } diff --git a/test/e2e/app-dir/forbidden/default/forbidden-default.test.ts b/test/e2e/app-dir/forbidden/default/forbidden-default.test.ts index 37635a9f2ea747..9ef97456dcbf98 100644 --- a/test/e2e/app-dir/forbidden/default/forbidden-default.test.ts +++ b/test/e2e/app-dir/forbidden/default/forbidden-default.test.ts @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxDescription, } from 'next-test-utils' @@ -22,7 +22,7 @@ describe('app dir - forbidden with default forbidden boundary', () => { await browser.elementByCss('#trigger-forbidden').click() if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toMatch( /forbidden\(\) is not allowed to use in root layout/ ) @@ -34,7 +34,7 @@ describe('app dir - forbidden with default forbidden boundary', () => { const browser = await next.browser('/?root-forbidden=1') if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toBe( 'Error: forbidden() is not allowed to use in root layout' ) @@ -72,7 +72,7 @@ describe('app dir - forbidden with default forbidden boundary', () => { ) await browser.loadPage(next.url + '/group-dynamic/403') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.waitForElementByCss('.group-root-layout') expect(await browser.elementByCss('.next-error-h1').text()).toBe('403') }) diff --git a/test/e2e/app-dir/global-error/error-in-global-error/error-in-global-error.test.ts b/test/e2e/app-dir/global-error/error-in-global-error/error-in-global-error.test.ts index 2e07543c537ae1..3d5056e931f36f 100644 --- a/test/e2e/app-dir/global-error/error-in-global-error/error-in-global-error.test.ts +++ b/test/e2e/app-dir/global-error/error-in-global-error/error-in-global-error.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox } from 'next-test-utils' +import { waitForRedbox } from 'next-test-utils' describe('app dir - global-error - error-in-global-error', () => { const { next, isNextDev } = nextTestSetup({ @@ -12,7 +12,7 @@ describe('app dir - global-error - error-in-global-error', () => { expect(text).toBe('Custom Global Error') if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) await expect(browser).toDisplayRedbox(` { "description": "error in page", @@ -37,7 +37,7 @@ describe('app dir - global-error - error-in-global-error', () => { ) if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) await expect(browser).toDisplayRedbox(` [ { 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..7e0330af0dfcb0 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,8 +1,8 @@ -import { assertHasRedbox, getRedboxHeader } from 'next-test-utils' +import { waitForRedbox, getRedboxHeader } from 'next-test-utils' import { nextTestSetup } from 'e2e-utils' async function testDev(browser, errorRegex) { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch(errorRegex) } diff --git a/test/e2e/app-dir/global-not-found/basic/global-not-found-basic.test.ts b/test/e2e/app-dir/global-not-found/basic/global-not-found-basic.test.ts index bded218938936b..f89b38536f3deb 100644 --- a/test/e2e/app-dir/global-not-found/basic/global-not-found-basic.test.ts +++ b/test/e2e/app-dir/global-not-found/basic/global-not-found-basic.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('global-not-found - basic', () => { const { next, isNextDev } = nextTestSetup({ @@ -9,7 +9,7 @@ describe('global-not-found - basic', () => { it('should render global-not-found for 404', async () => { const browser = await next.browser('/does-not-exist') if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const errorTitle = await browser.elementByCss('#global-error-title').text() diff --git a/test/e2e/app-dir/global-not-found/no-root-layout/no-root-layout.test.ts b/test/e2e/app-dir/global-not-found/no-root-layout/no-root-layout.test.ts index 2f86336fcbe9fc..4a5d64017e6c56 100644 --- a/test/e2e/app-dir/global-not-found/no-root-layout/no-root-layout.test.ts +++ b/test/e2e/app-dir/global-not-found/no-root-layout/no-root-layout.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('global-not-found - no-root-layout', () => { const { next, isNextDev } = nextTestSetup({ @@ -9,7 +9,7 @@ describe('global-not-found - no-root-layout', () => { it('should render global-not-found for 404', async () => { const browser = await next.browser('/does-not-exist') if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const errorTitle = await browser.elementByCss('#global-error-title').text() 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 2d3394728a7ed7..fb4fc957b7d4c7 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 @@ -1,11 +1,11 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxHeader } from 'next-test-utils' +import { waitForRedbox, 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) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch(errorRegex) } diff --git a/test/e2e/app-dir/metadata-route-like-pages/metadata-route-like-pages.test.ts b/test/e2e/app-dir/metadata-route-like-pages/metadata-route-like-pages.test.ts index b5d09de39dd473..4c33c3a46f0616 100644 --- a/test/e2e/app-dir/metadata-route-like-pages/metadata-route-like-pages.test.ts +++ b/test/e2e/app-dir/metadata-route-like-pages/metadata-route-like-pages.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('metadata-route-like-pages', () => { const { next } = nextTestSetup({ @@ -8,13 +8,13 @@ describe('metadata-route-like-pages', () => { it('should able to visit sitemap page', async () => { const browser = await next.browser('/sitemap') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('h1').text()).toBe('Sitemap') }) it('should able to visit icon page', async () => { const browser = await next.browser('/icon') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('h1').text()).toBe('Icon') }) }) diff --git a/test/e2e/app-dir/next-after-app-static/generate-static-params-error/index.test.ts b/test/e2e/app-dir/next-after-app-static/generate-static-params-error/index.test.ts index 32120937e0a5b0..ac3d091bc81b9b 100644 --- a/test/e2e/app-dir/next-after-app-static/generate-static-params-error/index.test.ts +++ b/test/e2e/app-dir/next-after-app-static/generate-static-params-error/index.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, getRedboxDescription, } from '../../../../lib/next-test-utils' @@ -18,7 +18,7 @@ describe('after() in generateStaticParams - thrown errors', () => { it('shows the error overlay if an error is thrown inside after', async () => { await next.start() const browser = await next.browser('/callback/1') - await assertHasRedbox(browser) + await waitForRedbox(browser) const route = '/callback/[myParam]' expect(await getRedboxDescription(browser)).toContain( `My cool error thrown inside after on route "${route}"` diff --git a/test/e2e/app-dir/next-after-app-static/generate-static-params/index.test.ts b/test/e2e/app-dir/next-after-app-static/generate-static-params/index.test.ts index e4ab3ebdb410bb..87ae198a2da282 100644 --- a/test/e2e/app-dir/next-after-app-static/generate-static-params/index.test.ts +++ b/test/e2e/app-dir/next-after-app-static/generate-static-params/index.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { nextTestSetup } from 'e2e-utils' import * as Log from './utils/log' -import { assertNoRedbox, retry } from '../../../../lib/next-test-utils' +import { waitForNoRedbox, retry } from '../../../../lib/next-test-utils' describe('after() in generateStaticParams', () => { const { next, isNextDev, skipped } = nextTestSetup({ @@ -31,7 +31,7 @@ describe('after() in generateStaticParams', () => { const browser = await next.browser('/one/a') expect(await browser.elementByCss('body').text()).toBe('Param: a') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await retry(async () => { expect(Log.readCliLogs(getLogs())).toContainEqual({ source: '[generateStaticParams] /one/[myParam]', @@ -40,7 +40,7 @@ describe('after() in generateStaticParams', () => { await browser.get(new URL('/two/d', next.url).href) expect(await browser.elementByCss('body').text()).toBe('Param: d') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await retry(async () => { expect(Log.readCliLogs(getLogs())).toContainEqual({ source: '[generateStaticParams] /two/[myParam]', 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 281839ebc4bbc8..7f28f69ddfe190 100644 --- a/test/e2e/app-dir/next-after-pages/index.test.ts +++ b/test/e2e/app-dir/next-after-pages/index.test.ts @@ -1,6 +1,6 @@ /* eslint-env jest */ import { nextTestSetup, isNextDev } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource, retry } from 'next-test-utils' +import { waitForRedbox, getRedboxSource, retry } from 'next-test-utils' import * as Log from './utils/log' // using after is a compile-time error in build mode. @@ -60,7 +60,7 @@ _describe('after() - pages', () => { ])('$title', async ({ path }) => { const browser = await next.browser(path) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toMatch( /You're importing a component that needs "?after"?\. That only works in a Server Component which is not supported in the pages\/ directory\./ ) diff --git a/test/e2e/app-dir/next-font/next-font.test.ts b/test/e2e/app-dir/next-font/next-font.test.ts index 90906a3731a568..809bd70451fba7 100644 --- a/test/e2e/app-dir/next-font/next-font.test.ts +++ b/test/e2e/app-dir/next-font/next-font.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup, FileRef } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' import { join } from 'path' import cheerio from 'cheerio' @@ -481,7 +481,7 @@ describe('app dir - next/font', () => { './does-not-exist.woff2' ) ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toInclude( "Can't resolve './does-not-exist.woff2'" ) diff --git a/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts b/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts index f7203ae7dd90c2..ebaec781150228 100644 --- a/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts +++ b/test/e2e/app-dir/non-root-project-monorepo/non-root-project-monorepo.test.ts @@ -1,7 +1,7 @@ import { nextTestSetup, FileRef } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxCallStack, getRedboxSource, } from 'next-test-utils' @@ -43,7 +43,7 @@ describe('non-root-project-monorepo', () => { it('should work on client-side', async () => { const browser = await next.browser('/monorepo-package-ssr') expect(await browser.elementByCss('p').text()).toBe('Hello Typescript') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('p').text()).toBe('Hello Typescript') await browser.close() }) @@ -66,7 +66,7 @@ describe('non-root-project-monorepo', () => { it('should work on client-side', async () => { const browser = await next.browser('/import-meta-url-ssr') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) if (isTurbopack) { // Turbopack intentionally doesn't expose the full path to the browser bundles expect(await browser.elementByCss('p').text()).toBe( @@ -85,7 +85,7 @@ describe('non-root-project-monorepo', () => { describe('source-maps', () => { it('should work on RSC', async () => { const browser = await next.browser('/source-maps-rsc') - await assertHasRedbox(browser) + await waitForRedbox(browser) if (isTurbopack) { // TODO the function name should be hidden @@ -148,7 +148,7 @@ describe('non-root-project-monorepo', () => { it('should work on SSR', async () => { const browser = await next.browser('/source-maps-ssr') - await assertHasRedbox(browser) + await waitForRedbox(browser) if (isTurbopack) { // TODO the function name should be hidden @@ -211,7 +211,7 @@ describe('non-root-project-monorepo', () => { it('should work on client-side', async () => { const browser = await next.browser('/source-maps-client') - await assertHasRedbox(browser) + await waitForRedbox(browser) if (isTurbopack) { // TODO the function name should be hidden diff --git a/test/e2e/app-dir/not-found-default/index.test.ts b/test/e2e/app-dir/not-found-default/index.test.ts index 45a4878ac5ff4c..c5c8f56c1bb1eb 100644 --- a/test/e2e/app-dir/not-found-default/index.test.ts +++ b/test/e2e/app-dir/not-found-default/index.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('app dir - not found with default 404 page', () => { const { next, isNextDev, skipped } = nextTestSetup({ @@ -92,7 +92,7 @@ describe('app dir - not found with default 404 page', () => { ) await browser.loadPage(next.url + '/group-dynamic/404') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.waitForElementByCss('.group-root-layout') expect(await browser.elementByCss('.next-error-h1').text()).toBe('404') }) diff --git a/test/e2e/app-dir/not-found-with-layout-and-group-not-found/index.test.ts b/test/e2e/app-dir/not-found-with-layout-and-group-not-found/index.test.ts index 9bdd2811cb9c68..82fcb2d92400c7 100644 --- a/test/e2e/app-dir/not-found-with-layout-and-group-not-found/index.test.ts +++ b/test/e2e/app-dir/not-found-with-layout-and-group-not-found/index.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('app dir - not found with nested layouts and custom not-found', () => { const { next, skipped } = nextTestSetup({ @@ -13,7 +13,7 @@ describe('app dir - not found with nested layouts and custom not-found', () => { it('should render the custom not-found page when notFound() is thrown from a page within the group', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const heading = await browser.elementByCss('h1#not-found-heading') expect(await heading.text()).toBe('Group Not Found Page') }) diff --git a/test/e2e/app-dir/not-found-with-nested-layouts/index.test.ts b/test/e2e/app-dir/not-found-with-nested-layouts/index.test.ts index cf0ba5eaf415db..724ae91bbed4e0 100644 --- a/test/e2e/app-dir/not-found-with-nested-layouts/index.test.ts +++ b/test/e2e/app-dir/not-found-with-nested-layouts/index.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('app dir - not found with nested layouts', () => { const { next, skipped } = nextTestSetup({ @@ -13,7 +13,7 @@ describe('app dir - not found with nested layouts', () => { it('should render the custom not-found page when notFound() is thrown from a page', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const heading = await browser.elementByCss('h1#not-found-heading') expect(await heading.text()).toBe('Custom Not Found Page') }) diff --git a/test/e2e/app-dir/parallel-routes-leaf-segments/parallel-routes-leaf-segments.build-error.test.ts b/test/e2e/app-dir/parallel-routes-leaf-segments/parallel-routes-leaf-segments.build-error.test.ts index 58d85cdebb56c7..791ac3c1828b0c 100644 --- a/test/e2e/app-dir/parallel-routes-leaf-segments/parallel-routes-leaf-segments.build-error.test.ts +++ b/test/e2e/app-dir/parallel-routes-leaf-segments/parallel-routes-leaf-segments.build-error.test.ts @@ -1,6 +1,6 @@ import path from 'path' import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, retry } from 'next-test-utils' +import { waitForRedbox, retry } from 'next-test-utils' describe('parallel-routes-leaf-segments-build-error', () => { const { next, isNextDev, skipped } = nextTestSetup({ @@ -30,7 +30,7 @@ describe('parallel-routes-leaf-segments-build-error', () => { it('should throw MissingDefaultParallelRouteError for @header slot', async () => { if (isNextDev) { const browser = await next.browser('/with-children/child') - await assertHasRedbox(browser) + await waitForRedbox(browser) await retry(async () => { const logs = await browser.log() @@ -56,7 +56,7 @@ describe('parallel-routes-leaf-segments-build-error', () => { it('should throw MissingDefaultParallelRouteError for parallel slots', async () => { if (isNextDev) { const browser = await next.browser('/with-groups-and-children/nested') - await assertHasRedbox(browser) + await waitForRedbox(browser) await retry(async () => { const logs = await browser.log() diff --git a/test/e2e/app-dir/refresh/refresh.test.ts b/test/e2e/app-dir/refresh/refresh.test.ts index 6c16c35aa5c472..40cdab7510ea3e 100644 --- a/test/e2e/app-dir/refresh/refresh.test.ts +++ b/test/e2e/app-dir/refresh/refresh.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { retry, assertHasRedbox, getRedboxDescription } from 'next-test-utils' +import { retry, waitForRedbox, getRedboxDescription } from 'next-test-utils' describe('app-dir refresh', () => { const { next, skipped, isNextDev } = nextTestSetup({ @@ -38,7 +38,7 @@ describe('app-dir refresh', () => { const browser = await next.browser('/refresh-invalid-render') if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) const description = await getRedboxDescription(browser) expect(description).toContain( 'refresh can only be called from within a Server Action' @@ -67,7 +67,7 @@ describe('app-dir refresh', () => { const browser = await next.browser('/refresh-invalid-cache') if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) const description = await getRedboxDescription(browser) expect(description).toContain( 'refresh can only be called from within a Server Action' diff --git a/test/e2e/app-dir/revalidatetag-rsc/revalidatetag-rsc.test.ts b/test/e2e/app-dir/revalidatetag-rsc/revalidatetag-rsc.test.ts index 0b305f6b84b98b..8e8a4e09b8097b 100644 --- a/test/e2e/app-dir/revalidatetag-rsc/revalidatetag-rsc.test.ts +++ b/test/e2e/app-dir/revalidatetag-rsc/revalidatetag-rsc.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxHeader, retry } from 'next-test-utils' +import { waitForRedbox, getRedboxHeader, retry } from 'next-test-utils' describe('revalidateTag-rsc', () => { const { next, isNextDev, isNextDeploy } = nextTestSetup({ @@ -28,7 +28,7 @@ describe('revalidateTag-rsc', () => { await browser.elementByCss('#revalidate-via-page').click() if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) await expect(getRedboxHeader(browser)).resolves.toContain( 'Route /revalidate_via_page used "revalidateTag data"' ) diff --git a/test/e2e/app-dir/root-layout/root-layout.test.ts b/test/e2e/app-dir/root-layout/root-layout.test.ts index 45c413e7b8c257..fde385d9d85d29 100644 --- a/test/e2e/app-dir/root-layout/root-layout.test.ts +++ b/test/e2e/app-dir/root-layout/root-layout.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, check, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, check, getRedboxSource } from 'next-test-utils' describe('app-dir root layout', () => { const { @@ -23,7 +23,7 @@ describe('app-dir root layout', () => { waitHydration: false, }) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` "Please make sure to include the following tags in your root layout: , . @@ -37,7 +37,7 @@ describe('app-dir root layout', () => { }) await browser.elementByCss('a').click() - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` "Please make sure to include the following tags in your root layout: , . @@ -50,7 +50,7 @@ describe('app-dir root layout', () => { waitHydration: false, }) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxSource(browser)).toMatchInlineSnapshot(` "Please make sure to include the following tags in your root layout: , . diff --git a/test/e2e/app-dir/scss/invalid-global-with-app/invalid-global-with-app.test.ts b/test/e2e/app-dir/scss/invalid-global-with-app/invalid-global-with-app.test.ts index 37c866554b3277..c2e6d6135f304d 100644 --- a/test/e2e/app-dir/scss/invalid-global-with-app/invalid-global-with-app.test.ts +++ b/test/e2e/app-dir/scss/invalid-global-with-app/invalid-global-with-app.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { isNextStart, nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' describe('Invalid Global CSS with Custom App', () => { const { next, skipped, isTurbopack, isRspack } = nextTestSetup({ @@ -33,7 +33,7 @@ describe('Invalid Global CSS with Custom App', () => { it('should show a build error', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorSource = await getRedboxSource(browser) if (isTurbopack) { diff --git a/test/e2e/app-dir/scss/invalid-global/invalid-global.test.ts b/test/e2e/app-dir/scss/invalid-global/invalid-global.test.ts index 65840a44230f99..aabe3ede8f465b 100644 --- a/test/e2e/app-dir/scss/invalid-global/invalid-global.test.ts +++ b/test/e2e/app-dir/scss/invalid-global/invalid-global.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { isNextStart, nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' describe('Invalid Global CSS', () => { const { next, skipped, isTurbopack, isRspack } = nextTestSetup({ @@ -33,7 +33,7 @@ describe('Invalid Global CSS', () => { it('should show a build error', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorSource = await getRedboxSource(browser) if (isTurbopack) { diff --git a/test/e2e/app-dir/scss/invalid-module-document/invalid-module-document.test.ts b/test/e2e/app-dir/scss/invalid-module-document/invalid-module-document.test.ts index 3aceaa70d3a3e6..ff6c61feb47a1f 100644 --- a/test/e2e/app-dir/scss/invalid-module-document/invalid-module-document.test.ts +++ b/test/e2e/app-dir/scss/invalid-module-document/invalid-module-document.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { isNextStart, nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' // Importing module CSS in _document is allowed in Turbopack ;(process.env.IS_TURBOPACK_TEST ? describe.skip : describe)( @@ -36,7 +36,7 @@ import { assertHasRedbox, getRedboxSource } from 'next-test-utils' it('should show a build error', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorSource = await getRedboxSource(browser) if (isRspack) { diff --git a/test/e2e/app-dir/scss/npm-import-bad/npm-import-bad.test.ts b/test/e2e/app-dir/scss/npm-import-bad/npm-import-bad.test.ts index 427f2650777c30..e34ca5fc6d01f7 100644 --- a/test/e2e/app-dir/scss/npm-import-bad/npm-import-bad.test.ts +++ b/test/e2e/app-dir/scss/npm-import-bad/npm-import-bad.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { isNextStart, nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' describe('CSS Import from node_modules', () => { const { next, skipped, isTurbopack, isRspack } = nextTestSetup({ @@ -32,7 +32,7 @@ describe('CSS Import from node_modules', () => { it('should show a build error', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorSource = await getRedboxSource(browser) if (isTurbopack) { diff --git a/test/e2e/app-dir/scss/valid-and-invalid-global/valid-and-invalid-global.test.ts b/test/e2e/app-dir/scss/valid-and-invalid-global/valid-and-invalid-global.test.ts index 418b583fe5e8a8..d9d549dcb9add9 100644 --- a/test/e2e/app-dir/scss/valid-and-invalid-global/valid-and-invalid-global.test.ts +++ b/test/e2e/app-dir/scss/valid-and-invalid-global/valid-and-invalid-global.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { isNextStart, nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource } from 'next-test-utils' +import { waitForRedbox, getRedboxSource } from 'next-test-utils' describe('Valid and Invalid Global CSS with Custom App', () => { const { next, skipped, isTurbopack, isRspack } = nextTestSetup({ @@ -33,7 +33,7 @@ describe('Valid and Invalid Global CSS with Custom App', () => { it('should show a build error', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorSource = await getRedboxSource(browser) if (isTurbopack) { diff --git a/test/e2e/app-dir/unauthorized/default/unauthorized-default.test.ts b/test/e2e/app-dir/unauthorized/default/unauthorized-default.test.ts index dcd24dd34a7e35..f1280f6f76cec7 100644 --- a/test/e2e/app-dir/unauthorized/default/unauthorized-default.test.ts +++ b/test/e2e/app-dir/unauthorized/default/unauthorized-default.test.ts @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxDescription, } from 'next-test-utils' @@ -22,7 +22,7 @@ describe('app dir - unauthorized with default unauthorized boundary', () => { await browser.elementByCss('#trigger-unauthorized').click() if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toMatch( /unauthorized\(\) is not allowed to use in root layout/ ) @@ -34,7 +34,7 @@ describe('app dir - unauthorized with default unauthorized boundary', () => { const browser = await next.browser('/?root-unauthorized=1') if (isNextDev) { - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxDescription(browser)).toBe( 'Error: unauthorized() is not allowed to use in root layout' ) @@ -72,7 +72,7 @@ describe('app dir - unauthorized with default unauthorized boundary', () => { ) await browser.loadPage(next.url + '/group-dynamic/401') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.waitForElementByCss('.group-root-layout') expect(await browser.elementByCss('.next-error-h1').text()).toBe('401') }) diff --git a/test/e2e/app-dir/use-cache-close-over-function/use-cache-close-over-function.test.ts b/test/e2e/app-dir/use-cache-close-over-function/use-cache-close-over-function.test.ts index 79013654badd00..a76927bd6cd9ca 100644 --- a/test/e2e/app-dir/use-cache-close-over-function/use-cache-close-over-function.test.ts +++ b/test/e2e/app-dir/use-cache-close-over-function/use-cache-close-over-function.test.ts @@ -1,6 +1,6 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, getRedboxDescription, getRedboxSource, openRedbox, @@ -68,7 +68,7 @@ describe('use-cache-close-over-function', () => { const outputIndex = next.cliOutput.length const browser = await next.browser('/server') - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorDescription = await getRedboxDescription(browser) const errorSource = await getRedboxSource(browser) diff --git a/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts b/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts index 9afee569f1b352..000270a83aa79d 100644 --- a/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts +++ b/test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts @@ -4,7 +4,7 @@ import { getRedboxDescription, getRedboxSource, openRedbox, - assertHasRedbox, + waitForRedbox, getRedboxTitle, getRedboxTotalErrorCount, } from 'next-test-utils' @@ -192,7 +192,7 @@ describe('use-cache-hanging-inputs', () => { it('should show an error overlay with only one error', async () => { const browser = await next.browser('/error') - await assertHasRedbox(browser) + await waitForRedbox(browser) const count = await getRedboxTotalErrorCount(browser) const title = await getRedboxTitle(browser) diff --git a/test/e2e/app-dir/use-cache-search-params/use-cache-search-params.test.ts b/test/e2e/app-dir/use-cache-search-params/use-cache-search-params.test.ts index 6cdacff9a923b2..01c03cfd8110d2 100644 --- a/test/e2e/app-dir/use-cache-search-params/use-cache-search-params.test.ts +++ b/test/e2e/app-dir/use-cache-search-params/use-cache-search-params.test.ts @@ -1,8 +1,8 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, assertNoConsoleErrors, - assertNoRedbox, + waitForNoRedbox, getRedboxDescription, getRedboxSource, } from 'next-test-utils' @@ -34,7 +34,7 @@ describe('use-cache-search-params', () => { const outputIndex = next.cliOutput.length const browser = await next.browser(`${route}?foo=1`) - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorDescription = await getRedboxDescription(browser) const errorSource = await getRedboxSource(browser) @@ -70,7 +70,7 @@ describe('use-cache-search-params', () => { const outputIndex = next.cliOutput.length const browser = await next.browser(`${route}?foo=1`) - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorDescription = await getRedboxDescription(browser) const errorSource = await getRedboxSource(browser) @@ -104,7 +104,7 @@ describe('use-cache-search-params', () => { await browser.refresh() await browser.refresh() - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorDescription = await getRedboxDescription(browser) @@ -121,7 +121,7 @@ describe('use-cache-search-params', () => { const outputIndex = next.cliOutput.length const browser = await next.browser(`${route}?foo=1`) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const cliOutput = stripAnsi(next.cliOutput.slice(outputIndex)) diff --git a/test/e2e/app-dir/use-cache-segment-configs/use-cache-segment-configs.test.ts b/test/e2e/app-dir/use-cache-segment-configs/use-cache-segment-configs.test.ts index ddcb977e411c37..406e52fabd2021 100644 --- a/test/e2e/app-dir/use-cache-segment-configs/use-cache-segment-configs.test.ts +++ b/test/e2e/app-dir/use-cache-segment-configs/use-cache-segment-configs.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox } from 'next-test-utils' +import { waitForRedbox } from 'next-test-utils' import stripAnsi from 'strip-ansi' describe('use-cache-segment-configs', () => { @@ -19,7 +19,7 @@ describe('use-cache-segment-configs', () => { if (isNextDev) { const browser = await next.browser('/runtime') - await assertHasRedbox(browser) + await waitForRedbox(browser) if (isTurbopack) { await expect(browser).toDisplayRedbox(` diff --git a/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts b/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts index 41154aad2c8782..58488c4e40a142 100644 --- a/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts +++ b/test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxDescription, getRedboxSource, retry, @@ -102,14 +102,14 @@ describe('use-cache-unknown-cache-kind', () => { it('should not show an error for default cache kinds', async () => { await using sandbox = await createSandbox(next, undefined, '/remote') const { browser } = sandbox - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should show a build error', async () => { await using sandbox = await createSandbox(next, undefined, '/') const { browser } = sandbox - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorDescription = await getRedboxDescription(browser) const errorSource = await getRedboxSource(browser) @@ -175,7 +175,7 @@ describe('use-cache-unknown-cache-kind', () => { await using sandbox = await createSandbox(next, undefined, '/') const { browser, session } = sandbox - await assertHasRedbox(browser) + await waitForRedbox(browser) await session.patch( 'next.config.js', @@ -191,7 +191,7 @@ describe('use-cache-unknown-cache-kind', () => { await retry(async () => { expect(await browser.elementByCss('p').text()).toBe('hello world') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) }) } diff --git a/test/e2e/app-dir/use-cache-without-experimental-flag/use-cache-without-experimental-flag.test.ts b/test/e2e/app-dir/use-cache-without-experimental-flag/use-cache-without-experimental-flag.test.ts index 9bb060b8117b11..4b248eee3b5b51 100644 --- a/test/e2e/app-dir/use-cache-without-experimental-flag/use-cache-without-experimental-flag.test.ts +++ b/test/e2e/app-dir/use-cache-without-experimental-flag/use-cache-without-experimental-flag.test.ts @@ -1,8 +1,8 @@ import { nextTestSetup } from 'e2e-utils' import { NextConfig } from 'next' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxDescription, getRedboxSource, retry, @@ -105,7 +105,7 @@ describe('use-cache-without-experimental-flag', () => { it('should show a build error', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const errorDescription = await getRedboxDescription(browser) const errorSource = await getRedboxSource(browser) @@ -176,7 +176,7 @@ describe('use-cache-without-experimental-flag', () => { it('should recover from the build error if useCache flag is set', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) await next.patchFile( 'next.config.js', @@ -184,7 +184,7 @@ describe('use-cache-without-experimental-flag', () => { () => retry(async () => { expect(await browser.elementByCss('p').text()).toBe('hello world') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) ) }) diff --git a/test/e2e/app-dir/use-cache/use-cache.test.ts b/test/e2e/app-dir/use-cache/use-cache.test.ts index c8b92aca3bbe1f..34cc2756e8cd81 100644 --- a/test/e2e/app-dir/use-cache/use-cache.test.ts +++ b/test/e2e/app-dir/use-cache/use-cache.test.ts @@ -1,7 +1,7 @@ import { nextTestSetup } from 'e2e-utils' import { assertNoConsoleErrors, - assertNoErrorToast, + waitForNoErrorToast, retry, } from 'next-test-utils' import stripAnsi from 'strip-ansi' @@ -1161,7 +1161,7 @@ describe('use-cache', () => { expect(canonicalUrl).toBe('https://example.com/baz/qux') // There should be no timeout error. - await assertNoErrorToast(browser) + await waitForNoErrorToast(browser) }) it('makes a cached generateMetadata function that implicitly depends on params dynamic during prerendering', async () => { @@ -1190,7 +1190,7 @@ describe('use-cache', () => { browser = await next.browser('/generate-metadata-resume/canonical/foo') // There should be no timeout error. - await assertNoErrorToast(browser) + await waitForNoErrorToast(browser) }) it('makes a cached generateMetadata function that reads params dynamic during prerendering', async () => { diff --git a/test/e2e/basepath/basepath.test.ts b/test/e2e/basepath/basepath.test.ts index a2f513e1a5768a..0754bc96558763 100644 --- a/test/e2e/basepath/basepath.test.ts +++ b/test/e2e/basepath/basepath.test.ts @@ -4,7 +4,7 @@ import cheerio from 'cheerio' import webdriver from 'next-webdriver' import { nextTestSetup } from 'e2e-utils' import { - assertNoRedbox, + waitForNoRedbox, check, fetchViaHTTP, getClientBuildManifestLoaderChunkUrlPath, @@ -535,7 +535,7 @@ describe('basePath', () => { expect(await browser.eval('window.location.search')).toBe('?query=true') if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } } finally { await browser.close() @@ -559,7 +559,7 @@ describe('basePath', () => { expect(await browser.eval('window.location.search')).toBe('?query=true') if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } } finally { await browser.close() diff --git a/test/e2e/basepath/trailing-slash.test.ts b/test/e2e/basepath/trailing-slash.test.ts index 078ff69d4d97f4..1f408c5472ce77 100644 --- a/test/e2e/basepath/trailing-slash.test.ts +++ b/test/e2e/basepath/trailing-slash.test.ts @@ -1,7 +1,7 @@ import webdriver from 'next-webdriver' import { createNext } from 'e2e-utils' import { NextInstance } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('basePath + trailingSlash', () => { let next: NextInstance @@ -42,7 +42,7 @@ describe('basePath + trailingSlash', () => { expect(await browser.eval('window.location.search')).toBe('?query=true') if (dev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } } finally { await browser.close() @@ -68,7 +68,7 @@ describe('basePath + trailingSlash', () => { expect(await browser.eval('window.location.search')).toBe('?query=true') if (dev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } } finally { await browser.close() diff --git a/test/e2e/conflicting-app-page-error/index.test.ts b/test/e2e/conflicting-app-page-error/index.test.ts index ce3af461adfce1..44076bfd6905a2 100644 --- a/test/e2e/conflicting-app-page-error/index.test.ts +++ b/test/e2e/conflicting-app-page-error/index.test.ts @@ -1,6 +1,6 @@ import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, getRedboxHeader, getRedboxSource, retry, @@ -49,7 +49,7 @@ describe('Conflict between app file and pages file', () => { async function containConflictsError(browser, conflicts) { await retry(async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) if (process.env.IS_TURBOPACK_TEST) { expect(await getRedboxDescription(browser)).toContain( 'App Router and Pages Router both match path:' @@ -70,7 +70,7 @@ describe('Conflict between app file and pages file', () => { it('should show error overlay for /another', async () => { await next.start() const browser = await next.browser('/another') - await assertHasRedbox(browser) + await waitForRedbox(browser) await containConflictsError(browser, [ ['pages/index.js', 'app/page.js'], ['pages/another.js', 'app/another/page.js'], @@ -79,7 +79,7 @@ describe('Conflict between app file and pages file', () => { it('should show error overlay for /', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) await containConflictsError(browser, [ ['pages/index.js', 'app/page.js'], ['pages/another.js', 'app/another/page.js'], @@ -88,14 +88,14 @@ describe('Conflict between app file and pages file', () => { it('should support hmr with conflicts', async () => { const browser = await next.browser('/') - await assertHasRedbox(browser) + await waitForRedbox(browser) await next.renameFile('pages/index.js', 'pages/index2.js') await next.renameFile('pages/another.js', 'pages/another2.js') // Wait for successful recompilation await browser.loadPage(next.url + '/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await browser.elementByCss('p').text()).toContain('index - app') await browser.loadPage(next.url + '/another') @@ -104,23 +104,23 @@ describe('Conflict between app file and pages file', () => { it('should not show error overlay for non conflict pages under app or pages dir', async () => { const browser = await next.browser('/non-conflict') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await getRedboxHeader(browser)).toEqual(null) expect(await browser.elementByCss('p').text()).toBe('non-conflict app') await browser.loadPage(next.url + '/non-conflict-pages') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(await getRedboxHeader(browser)).toEqual(null) expect(await browser.elementByCss('h1').text()).toBe('non-conflict pages') }) it('should error again when there is new conflict', async () => { const browser = await next.browser('/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) // Re-trigger the conflicted errors await next.renameFile('pages/index2.js', 'pages/index.js') - await assertHasRedbox(browser) + await waitForRedbox(browser) await containConflictsError(browser, [['pages/index.js', 'app/page.js']]) }) } diff --git a/test/e2e/geist-font/geist-font.test.ts b/test/e2e/geist-font/geist-font.test.ts index 8991075f2f897e..0440be47f7ba94 100644 --- a/test/e2e/geist-font/geist-font.test.ts +++ b/test/e2e/geist-font/geist-font.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('geist-font', () => { const { next } = nextTestSetup({ @@ -15,7 +15,7 @@ describe('geist-font', () => { it('should work with geist font in pages router', async () => { const browser = await next.browser('/foo') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const text = await browser.elementByCss('p').text() expect(text).toBe('Foo page') }) diff --git a/test/e2e/getserversideprops/test/index.test.ts b/test/e2e/getserversideprops/test/index.test.ts index ea7bc6fb6cc736..c4849d359b7c70 100644 --- a/test/e2e/getserversideprops/test/index.test.ts +++ b/test/e2e/getserversideprops/test/index.test.ts @@ -12,7 +12,7 @@ import { normalizeRegEx, renderViaHTTP, waitFor, - assertHasRedbox, + waitForRedbox, } from 'next-test-utils' import { join } from 'path' import webdriver from 'next-webdriver' @@ -768,7 +768,7 @@ const runTests = (isDev = false, isDeploy = false) => { const browser = await webdriver(next.url, '/') await browser.elementByCss('#non-json').click() - await assertHasRedbox(browser) + await waitForRedbox(browser) await expect(getRedboxHeader(browser)).resolves.toMatch( /Error serializing `.time` returned from `getServerSideProps`/ ) diff --git a/test/e2e/legacy-link-behavior/validations.console.test.ts b/test/e2e/legacy-link-behavior/validations.console.test.ts index 9a5c964f5b8df9..f3c19b8d34afc3 100644 --- a/test/e2e/legacy-link-behavior/validations.console.test.ts +++ b/test/e2e/legacy-link-behavior/validations.console.test.ts @@ -1,5 +1,5 @@ import { isNextDev, nextTestSetup } from 'e2e-utils' -import { assertNoRedbox } from 'next-test-utils' +import { waitForNoRedbox } from 'next-test-utils' describe('Validations for ', () => { const { next, isNextDeploy } = nextTestSetup({ @@ -117,7 +117,7 @@ describe('Validations for ', () => { ) if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } else { expect(newConsoleOutput()).toEqual('') } @@ -129,7 +129,7 @@ describe('Validations for ', () => { ) if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } else { expect(newConsoleOutput()).toEqual('') } @@ -188,7 +188,7 @@ describe('Validations for ', () => { ) if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } else { expect(newConsoleOutput()).toEqual('') } @@ -233,7 +233,7 @@ describe('Validations for ', () => { ) if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } else { expect(newConsoleOutput()).toEqual('') } @@ -245,7 +245,7 @@ describe('Validations for ', () => { ) if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } else { expect(newConsoleOutput()).toEqual('') } @@ -320,7 +320,7 @@ describe('Validations for ', () => { const browser = await next.browser('/validations/client/child-component') if (isNextDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } else { expect(newConsoleOutput()).toEqual('') } diff --git a/test/e2e/module-layer/module-layer.test.ts b/test/e2e/module-layer/module-layer.test.ts index 982fe2cdc7249f..97bb8b8cf81d19 100644 --- a/test/e2e/module-layer/module-layer.test.ts +++ b/test/e2e/module-layer/module-layer.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxSource, retry } from 'next-test-utils' +import { waitForRedbox, getRedboxSource, retry } from 'next-test-utils' describe('module layer', () => { const { next, isNextStart, isNextDev } = nextTestSetup({ @@ -115,7 +115,7 @@ describe('module layer', () => { ) await retry(async () => { - await assertHasRedbox(browser) + await waitForRedbox(browser) const source = await getRedboxSource(browser) expect(source).toContain( `You're importing a component that imports client-only. It only works in a Client Component but none of its parents are marked with "use client"` diff --git a/test/e2e/prerender.test.ts b/test/e2e/prerender.test.ts index 903ce9e8b43228..3b00e0319ad86e 100644 --- a/test/e2e/prerender.test.ts +++ b/test/e2e/prerender.test.ts @@ -6,7 +6,7 @@ import escapeRegex from 'escape-string-regexp' import { createNext, FileRef } from 'e2e-utils' import { NextInstance } from 'e2e-utils' import { - assertHasRedbox, + waitForRedbox, check, fetchViaHTTP, getBrowserBodyText, @@ -1356,7 +1356,7 @@ describe('Prerender', () => { // ) // FIXME: disable this - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch( /Failed to load static props/ ) @@ -1372,7 +1372,7 @@ describe('Prerender', () => { // ) // FIXME: disable this - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch( /Failed to load static props/ ) diff --git a/test/e2e/react-compiler/react-compiler.test.ts b/test/e2e/react-compiler/react-compiler.test.ts index cf67a74d6944b1..b80e1f31f09b58 100644 --- a/test/e2e/react-compiler/react-compiler.test.ts +++ b/test/e2e/react-compiler/react-compiler.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup, FileRef } from 'e2e-utils' -import { assertHasRedbox } from 'next-test-utils' +import { waitForRedbox } from 'next-test-utils' import { join } from 'path' import stripAnsi from 'strip-ansi' @@ -143,7 +143,7 @@ describe.each(['default', 'babelrc'] as const)( '\n 2 |' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) } }) } diff --git a/test/e2e/type-module-interop/index.test.ts b/test/e2e/type-module-interop/index.test.ts index c756744717f676..430d6b5cdc2b06 100644 --- a/test/e2e/type-module-interop/index.test.ts +++ b/test/e2e/type-module-interop/index.test.ts @@ -1,6 +1,6 @@ import { createNext } from 'e2e-utils' import { NextInstance } from 'e2e-utils' -import { assertNoRedbox, renderViaHTTP } from 'next-test-utils' +import { waitForNoRedbox, renderViaHTTP } from 'next-test-utils' import webdriver from 'next-webdriver' import cheerio from 'cheerio' @@ -89,7 +89,7 @@ describe('Type module interop', () => { it('should render client-side', async () => { const browser = await webdriver(next.url, '/') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.close() }) @@ -101,7 +101,7 @@ describe('Type module interop', () => { it('should render client-side with modules', async () => { const browser = await webdriver(next.url, '/modules') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await browser.close() }) }) diff --git a/test/e2e/with-router/index.test.ts b/test/e2e/with-router/index.test.ts index 918c8270843127..bd09a1c8465f74 100644 --- a/test/e2e/with-router/index.test.ts +++ b/test/e2e/with-router/index.test.ts @@ -1,5 +1,5 @@ import { nextTestSetup } from 'e2e-utils' -import { assertHasRedbox, getRedboxHeader } from 'next-test-utils' +import { waitForRedbox, getRedboxHeader } from 'next-test-utils' describe('withRouter', () => { const { next, isTurbopack, isNextDev } = nextTestSetup({ @@ -65,7 +65,7 @@ describe('withRouter', () => { describe('SSR', () => { it('should show an error when trying to use router methods during SSR', async () => { const browser = await next.browser('/router-method-ssr') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch( `No router instance found. you should only use "next/router" inside the client side of your app. https://` ) diff --git a/test/integration/app-config-asset-prefix/test/index.test.js b/test/integration/app-config-asset-prefix/test/index.test.js index 8030f06f40ac62..3cc722fc73b874 100644 --- a/test/integration/app-config-asset-prefix/test/index.test.js +++ b/test/integration/app-config-asset-prefix/test/index.test.js @@ -1,7 +1,7 @@ /* eslint-env jest */ import { join } from 'path' import { - assertNoRedbox, + waitForNoRedbox, killApp, findPort, launchApp, @@ -25,7 +25,7 @@ describe('App assetPrefix config', () => { const browser = await webdriver(appPort, '/') try { await waitFor(2000) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const title = await browser.elementById('title').text() expect(title).toBe('IndexPage') } finally { diff --git a/test/integration/app-dir-export/test/utils.ts b/test/integration/app-dir-export/test/utils.ts index 3eefa9b8e5280a..d861d442b90b21 100644 --- a/test/integration/app-dir-export/test/utils.ts +++ b/test/integration/app-dir-export/test/utils.ts @@ -6,7 +6,7 @@ import fs from 'fs-extra' import webdriver from 'next-webdriver' import globOrig from 'glob' import { - assertHasRedbox, + waitForRedbox, check, fetchViaHTTP, File, @@ -267,7 +267,7 @@ export async function runTests({ if (isDev) { const url = dynamicPage ? '/another/first' : '/api/json' const browser = await webdriver(port, url) - await assertHasRedbox(browser) + await waitForRedbox(browser) const header = await getRedboxHeader(browser) const source = await getRedboxSource(browser) if (expectedErrMsg instanceof RegExp) { diff --git a/test/integration/config-devtool-dev/test/index.test.js b/test/integration/config-devtool-dev/test/index.test.js index 0a68c96689cd20..fd39d0893c2597 100644 --- a/test/integration/config-devtool-dev/test/index.test.js +++ b/test/integration/config-devtool-dev/test/index.test.js @@ -1,7 +1,7 @@ /* eslint-env jest */ import { - assertHasRedbox, + waitForRedbox, findPort, getRedboxSource, killApp, @@ -32,7 +32,7 @@ const appDir = join(__dirname, '../') }) const browser = await webdriver(appPort, '/') - await assertHasRedbox(browser) + await waitForRedbox(browser) if (process.platform === 'win32') { // TODO: add win32 snapshot } else { diff --git a/test/integration/config-output-export/test/index.test.ts b/test/integration/config-output-export/test/index.test.ts index 2123c4758a2144..8ef09dbbd630ba 100644 --- a/test/integration/config-output-export/test/index.test.ts +++ b/test/integration/config-output-export/test/index.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, fetchViaHTTP, File, findPort, @@ -218,7 +218,7 @@ describe('config-output-export', () => { }) browser = await webdriver(result.port, '/blog') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'ISR cannot be used with "output: export".' ) @@ -253,7 +253,7 @@ describe('config-output-export', () => { output: 'export', }) browser = await webdriver(result.port, '/blog') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { await killApp(app).catch(() => {}) fs.rmSync(blog) @@ -281,7 +281,7 @@ describe('config-output-export', () => { output: 'export', }) browser = await webdriver(result.port, '/blog') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { await killApp(app).catch(() => {}) fs.rmSync(blog) @@ -309,7 +309,7 @@ describe('config-output-export', () => { output: 'export', }) browser = await webdriver(result.port, '/blog') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'getServerSideProps cannot be used with "output: export".' ) @@ -353,7 +353,7 @@ describe('config-output-export', () => { output: 'export', }) browser = await webdriver(result.port, '/posts/one') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'getStaticPaths with "fallback: true" cannot be used with "output: export".' ) @@ -397,7 +397,7 @@ describe('config-output-export', () => { output: 'export', }) browser = await webdriver(result.port, '/posts/one') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'getStaticPaths with "fallback: blocking" cannot be used with "output: export".' ) @@ -443,7 +443,7 @@ describe('config-output-export', () => { browser = await webdriver(result.port, '/posts/one') const h1 = await browser.elementByCss('h1') expect(await h1.text()).toContain('Hello from one') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(result.stderr).toBeEmpty() } finally { await killApp(app).catch(() => {}) diff --git a/test/integration/custom-routes/test/index.test.js b/test/integration/custom-routes/test/index.test.js index 8c7dad9a645af7..e2674522716f90 100644 --- a/test/integration/custom-routes/test/index.test.js +++ b/test/integration/custom-routes/test/index.test.js @@ -9,7 +9,7 @@ import WebSocket from 'ws' import cheerio from 'cheerio' import webdriver from 'next-webdriver' import { - assertNoRedbox, + waitForNoRedbox, launchApp, killApp, findPort, @@ -296,7 +296,7 @@ const runTests = (isDev = false) => { expect(await browser.eval('window.beforeNav')).toBe(1) if (isDev) { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } }) diff --git a/test/integration/dynamic-routing/test/index.test.js b/test/integration/dynamic-routing/test/index.test.js index 87614daf776b64..890f09ce2c7172 100644 --- a/test/integration/dynamic-routing/test/index.test.js +++ b/test/integration/dynamic-routing/test/index.test.js @@ -5,7 +5,7 @@ import { join, dirname } from 'path' import fs from 'fs-extra' import url from 'url' import { - assertHasRedbox, + waitForRedbox, renderViaHTTP, fetchViaHTTP, findPort, @@ -1200,7 +1200,7 @@ function runTests({ dev }) { await browser .elementByCss('#view-post-1-interpolated-incorrectly') .click() - await assertHasRedbox(browser) + await waitForRedbox(browser) 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.ts b/test/integration/invalid-href/test/index.test.ts index 0ec9bc411ee8aa..7d326867a83ca7 100644 --- a/test/integration/invalid-href/test/index.test.ts +++ b/test/integration/invalid-href/test/index.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { - assertHasRedbox, + waitForRedbox, findPort, getRedboxHeader, killApp, @@ -49,7 +49,7 @@ const showsError = async (pathname, regex, click = false, isWarn = false) => { return warnLogs.join('\n') }, regex) } else { - await assertHasRedbox(browser) + await waitForRedbox(browser) 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 73710e1c752a2e..9bd3068e3e9fdd 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 @@ -1,8 +1,8 @@ /* eslint-env jest */ import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, check, findPort, getRedboxHeader, @@ -376,7 +376,7 @@ function runTests(mode) { it('should show missing src error', async () => { const browser = await webdriver(appPort, '/docs/missing-src') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -386,7 +386,7 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/docs/invalid-src') - await assertHasRedbox(browser) + await waitForRedbox(browser) 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 +398,7 @@ function runTests(mode) { '/docs/invalid-src-proto-relative' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) 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 dc6ce25ea89b6e..6c8a5693355be0 100644 --- a/test/integration/next-image-legacy/default/test/index.test.ts +++ b/test/integration/next-image-legacy/default/test/index.test.ts @@ -3,8 +3,8 @@ import cheerio from 'cheerio' import validateHTML from 'html-validator' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, check, fetchViaHTTP, findPort, @@ -814,7 +814,7 @@ function runTests(mode) { it('should show missing src error', async () => { const browser = await webdriver(appPort, '/missing-src') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -824,7 +824,7 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/invalid-src') - await assertHasRedbox(browser) + await waitForRedbox(browser) 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 +833,7 @@ 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 waitForRedbox(browser) 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 +842,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.` ) @@ -851,7 +851,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" or "height" property. These should be numeric values.` ) @@ -863,7 +863,7 @@ function runTests(mode) { '/invalid-placeholder-blur-static' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch( /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/ ) @@ -875,7 +875,7 @@ function runTests(mode) { await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') }, /Image with src (.*)jpg(.*) may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width/gm) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should warn when img with layout=fill is inside a container without position relative', async () => { @@ -900,7 +900,7 @@ function runTests(mode) { expect(warnings).not.toMatch( /Image with src (.*)webp(.*) may not render properly/gm ) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) it('should warn when using a very small image with placeholder=blur', async () => { @@ -909,7 +909,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)jpg(.*) is smaller than 40x40. Consider removing(.*)/gm ) @@ -921,7 +921,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)jpg(.*) is using quality "50" which is not configured in images.qualities \[75\]. Please update your config to \[50, 75\]./gm ) @@ -933,7 +933,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Expected server HTML to contain a matching/gm ) @@ -957,7 +957,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)test(.*) was detected as the Largest Contentful Paint/gm ) @@ -972,7 +972,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)png(.*) has a "loader" property that does not implement width/gm ) @@ -996,7 +996,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)png(.*) has "sizes" property but it will be ignored/gm ) @@ -1017,7 +1017,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Image with src (.*) has a "loader" property that does not implement width/gm ) 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 8cfc8a713b5527..e37e00fbc770c2 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 @@ -1,8 +1,8 @@ /* eslint-env jest */ import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, fetchViaHTTP, findPort, getImagesManifest, @@ -35,7 +35,7 @@ function runTests(mode: 'dev' | 'server') { it('should load matching images', async () => { const browser = await webdriver(appPort, '/') if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const ids = ['nested-assets', 'static-img'] const urls = await Promise.all(ids.map((id) => getSrc(browser, id))) @@ -55,7 +55,7 @@ function runTests(mode: 'dev' | 'server') { const page = '/' + id const browser = await webdriver(appPort, page) if (mode === 'dev') { - await assertHasRedbox(browser) + await waitForRedbox(browser) 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-qualities/test/index.test.ts b/test/integration/next-image-new/app-dir-qualities/test/index.test.ts index 8589d740bd9299..30192aa6217c0f 100644 --- a/test/integration/next-image-new/app-dir-qualities/test/index.test.ts +++ b/test/integration/next-image-new/app-dir-qualities/test/index.test.ts @@ -1,7 +1,7 @@ /* eslint-env jest */ import { - assertNoRedbox, + waitForNoRedbox, fetchViaHTTP, findPort, getImagesManifest, @@ -33,7 +33,7 @@ function runTests(mode: 'dev' | 'server') { it('should load img when quality is undefined', async () => { const browser = await webdriver(appPort, '/') if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const url = await getSrc(browser, 'q-undefined') const res = await fetchViaHTTP(appPort, url) @@ -44,7 +44,7 @@ function runTests(mode: 'dev' | 'server') { it('should load img when quality 42', async () => { const browser = await webdriver(appPort, '/') if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const url = await getSrc(browser, 'q-42') const res = await fetchViaHTTP(appPort, url) @@ -54,7 +54,7 @@ function runTests(mode: 'dev' | 'server') { it('should load img when quality 69', async () => { const browser = await webdriver(appPort, '/') if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const url = await getSrc(browser, 'q-69') const res = await fetchViaHTTP(appPort, url) @@ -64,7 +64,7 @@ function runTests(mode: 'dev' | 'server') { it('should load img when quality 88', async () => { const browser = await webdriver(appPort, '/') if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const url = await getSrc(browser, 'q-88') const res = await fetchViaHTTP(appPort, url) @@ -75,7 +75,7 @@ function runTests(mode: 'dev' | 'server') { const page = '/invalid-quality' const browser = await webdriver(appPort, page) if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } const url = await getSrc(browser, 'q-100') expect(url).toContain('&q=88') // coerced to closest matching of 88 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 821982b6bb870c..0a7ddc63145b46 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 @@ -3,8 +3,8 @@ import cheerio from 'cheerio' import validateHTML from 'html-validator' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, check, fetchViaHTTP, findPort, @@ -955,7 +955,7 @@ function runTests(mode: 'dev' | 'server') { 'position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;object-position:10% 10%;color:transparent' ) if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const warnings = (await browser.log()) .map((log) => log.message) .join('\n') @@ -987,7 +987,7 @@ function runTests(mode: 'dev' | 'server') { 'color:transparent;width:100%;height:auto' ) if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const warnings = (await browser.log()) .map((log) => log.message) .join('\n') @@ -1037,7 +1037,7 @@ function runTests(mode: 'dev' | 'server') { it('should show missing src error', async () => { const browser = await webdriver(appPort, '/missing-src') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -1047,7 +1047,7 @@ function runTests(mode: 'dev' | 'server') { it('should show empty string src error', async () => { const browser = await webdriver(appPort, '/empty-string-src') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -1057,7 +1057,7 @@ function runTests(mode: 'dev' | 'server') { it('should show null src error', async () => { const browser = await webdriver(appPort, '/invalid-src-null') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await retry(async () => { expect( @@ -1069,7 +1069,7 @@ function runTests(mode: 'dev' | 'server') { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/invalid-src') - await assertHasRedbox(browser) + await waitForRedbox(browser) 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`' ) @@ -1078,7 +1078,7 @@ 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 waitForRedbox(browser) 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://)' ) @@ -1086,7 +1086,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'Image with src " /test.jpg" cannot start with a space or control character.' ) @@ -1094,7 +1094,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'Image with src "/test.png " cannot end with a space or control character.' ) @@ -1103,7 +1103,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.` ) @@ -1112,7 +1112,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "100%".` ) @@ -1121,7 +1121,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "Infinity".` ) @@ -1130,7 +1130,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "height" property. Expected a numeric value in pixels but received "50vh".` ) @@ -1139,7 +1139,7 @@ function runTests(mode: 'dev' | 'server') { it('should show missing alt error', async () => { const browser = await webdriver(appPort, '/missing-alt') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -1149,7 +1149,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "width" property.` ) @@ -1158,7 +1158,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "height" property.` ) @@ -1167,7 +1167,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/wide.png" has both "width" and "fill" properties.` ) @@ -1176,7 +1176,7 @@ 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 waitForRedbox(browser) 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.` ) @@ -1188,7 +1188,7 @@ function runTests(mode: 'dev' | 'server') { '/invalid-placeholder-blur-static' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch( /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/ ) @@ -1200,7 +1200,7 @@ function runTests(mode: 'dev' | 'server') { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)jpg(.*) is smaller than 40x40. Consider removing(.*)/gm ) @@ -1212,7 +1212,7 @@ function runTests(mode: 'dev' | 'server') { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)jpg(.*) is using quality "50" which is not configured in images.qualities \[75\]. Please update your config to \[50, 75\]./gm ) @@ -1224,7 +1224,7 @@ function runTests(mode: 'dev' | 'server') { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Expected server HTML to contain a matching/gm ) @@ -1248,7 +1248,7 @@ function runTests(mode: 'dev' | 'server') { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)test(.*) was detected as the Largest Contentful Paint/gm ) @@ -1263,7 +1263,7 @@ function runTests(mode: 'dev' | 'server') { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)png(.*) has a "loader" property that does not implement width/gm ) @@ -1286,7 +1286,7 @@ function runTests(mode: 'dev' | 'server') { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Image with src (.*) has "fill" but is missing "sizes" prop. Please add it to improve page performance/gm ) @@ -1298,7 +1298,7 @@ function runTests(mode: 'dev' | 'server') { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Image with src (.*) has a "loader" property that does not implement width/gm ) 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..f51ac964c0dc69 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 @@ -1,8 +1,8 @@ /* eslint-env jest */ import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, check, findPort, getRedboxHeader, @@ -131,7 +131,7 @@ function runTests(mode) { it('should show missing src error', async () => { const browser = await webdriver(appPort, '/docs/missing-src') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -141,7 +141,7 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/docs/invalid-src') - await assertHasRedbox(browser) + await waitForRedbox(browser) 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 +153,7 @@ function runTests(mode) { '/docs/invalid-src-proto-relative' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) 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 52ae99e6a62f27..c054a7643ffe97 100644 --- a/test/integration/next-image-new/default/test/index.test.ts +++ b/test/integration/next-image-new/default/test/index.test.ts @@ -3,8 +3,8 @@ import cheerio from 'cheerio' import validateHTML from 'html-validator' import { - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, check, fetchViaHTTP, findPort, @@ -954,7 +954,7 @@ function runTests(mode) { 'position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;object-position:10% 10%;color:transparent' ) if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const warnings = (await browser.log()) .map((log) => log.message) .join('\n') @@ -986,7 +986,7 @@ function runTests(mode) { 'color:transparent;width:100%;height:auto' ) if (mode === 'dev') { - await assertNoRedbox(browser) + await waitForNoRedbox(browser) const warnings = (await browser.log()) .map((log) => log.message) .join('\n') @@ -1036,7 +1036,7 @@ function runTests(mode) { it('should show missing src error', async () => { const browser = await webdriver(appPort, '/missing-src') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -1046,7 +1046,7 @@ function runTests(mode) { it('should show empty string src error', async () => { const browser = await webdriver(appPort, '/empty-string-src') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -1056,7 +1056,7 @@ function runTests(mode) { it('should show null src error', async () => { const browser = await webdriver(appPort, '/invalid-src-null') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await retry(async () => { expect( @@ -1068,7 +1068,7 @@ function runTests(mode) { it('should show invalid src error', async () => { const browser = await webdriver(appPort, '/invalid-src') - await assertHasRedbox(browser) + await waitForRedbox(browser) 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`' ) @@ -1077,7 +1077,7 @@ 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 waitForRedbox(browser) 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://)' ) @@ -1085,7 +1085,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'Image with src " /test.jpg" cannot start with a space or control character.' ) @@ -1093,7 +1093,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( 'Image with src "/test.png " cannot end with a space or control character.' ) @@ -1102,7 +1102,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.` ) @@ -1111,7 +1111,7 @@ function runTests(mode) { it('should show error when invalid width prop', async () => { const browser = await webdriver(appPort, '/invalid-width') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "100%".` ) @@ -1120,7 +1120,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "Infinity".` ) @@ -1129,7 +1129,7 @@ function runTests(mode) { it('should show error when invalid height prop', async () => { const browser = await webdriver(appPort, '/invalid-height') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" has invalid "height" property. Expected a numeric value in pixels but received "50vh".` ) @@ -1138,7 +1138,7 @@ function runTests(mode) { it('should show missing alt error', async () => { const browser = await webdriver(appPort, '/missing-alt') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) await check(async () => { return (await browser.log()).map((log) => log.message).join('\n') @@ -1148,7 +1148,7 @@ function runTests(mode) { it('should show error when missing width prop', async () => { const browser = await webdriver(appPort, '/missing-width') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "width" property.` ) @@ -1157,7 +1157,7 @@ function runTests(mode) { it('should show error when missing height prop', async () => { const browser = await webdriver(appPort, '/missing-height') - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/test.jpg" is missing required "height" property.` ) @@ -1166,7 +1166,7 @@ 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 waitForRedbox(browser) expect(await getRedboxHeader(browser)).toContain( `Image with src "/wide.png" has both "width" and "fill" properties.` ) @@ -1175,7 +1175,7 @@ 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 waitForRedbox(browser) 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.` ) @@ -1187,7 +1187,7 @@ function runTests(mode) { '/invalid-placeholder-blur-static' ) - await assertHasRedbox(browser) + await waitForRedbox(browser) expect(await getRedboxHeader(browser)).toMatch( /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/ ) @@ -1199,7 +1199,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)jpg(.*) is smaller than 40x40. Consider removing(.*)/gm ) @@ -1211,7 +1211,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)jpg(.*) is using quality "50" which is not configured in images.qualities \[75\]. Please update your config to \[50, 75\]/gm ) @@ -1223,7 +1223,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Expected server HTML to contain a matching/gm ) @@ -1247,7 +1247,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)test(.*) was detected as the Largest Contentful Paint/gm ) @@ -1262,7 +1262,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).toMatch( /Image with src (.*)png(.*) has a "loader" property that does not implement width/gm ) @@ -1285,7 +1285,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Image with src (.*) has "fill" but is missing "sizes" prop. Please add it to improve page performance/gm ) @@ -1297,7 +1297,7 @@ function runTests(mode) { const warnings = (await browser.log()) .map((log) => log.message) .join('\n') - await assertNoRedbox(browser) + await waitForNoRedbox(browser) expect(warnings).not.toMatch( /Image with src (.*) has a "loader" property that does not implement width/gm ) 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..92a0d28ae5e5e1 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 @@ -2,7 +2,7 @@ import { join } from 'path' import { - assertHasRedbox, + waitForRedbox, findPort, getRedboxHeader, killApp, @@ -35,7 +35,7 @@ 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 waitForRedbox(browser) 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 acc9280f85084c..57a68ec465a0d6 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 @@ -2,7 +2,7 @@ import { join } from 'path' import { - assertHasRedbox, + waitForRedbox, findPort, getRedboxDescription, getRedboxSource, @@ -22,7 +22,7 @@ function runTests({ isDev }) { it('should show error', async () => { if (isDev) { const browser = await webdriver(appPort, '/') - await assertHasRedbox(browser) + await waitForRedbox(browser) const description = await getRedboxDescription(browser) if (process.env.IS_TURBOPACK_TEST) { expect(description).toMatchInlineSnapshot(`"Processing image failed"`) 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 caf5b46dd64ac0..c4ede43def96bc 100644 --- a/test/integration/server-side-dev-errors/test/index.test.js +++ b/test/integration/server-side-dev-errors/test/index.test.js @@ -4,7 +4,7 @@ import fs from 'fs/promises' import { join } from 'path' import webdriver from 'next-webdriver' import { - assertNoRedbox, + waitForNoRedbox, findPort, killApp, launchApp, @@ -98,7 +98,7 @@ describe('server-side dev errors', () => { `) await fs.writeFile(gspPage, content, { flush: true }) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { await fs.writeFile(gspPage, content) } @@ -148,7 +148,7 @@ describe('server-side dev errors', () => { `) await fs.writeFile(gsspPage, content) - await assertNoRedbox(browser) + await waitForNoRedbox(browser) } finally { await fs.writeFile(gsspPage, content) } @@ -262,7 +262,7 @@ describe('server-side dev errors', () => { await retry(async () => { // manually refresh as this is an API route await browser.refresh() - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) } finally { await fs.writeFile(apiPage, content) @@ -328,7 +328,7 @@ describe('server-side dev errors', () => { await retry(async () => { // manually refresh as this is an API route await browser.refresh() - await assertNoRedbox(browser) + await waitForNoRedbox(browser) }) } finally { await fs.writeFile(dynamicApiPage, content) diff --git a/test/lib/add-redbox-matchers.ts b/test/lib/add-redbox-matchers.ts index 97c64d010942b0..250f5487fdbd91 100644 --- a/test/lib/add-redbox-matchers.ts +++ b/test/lib/add-redbox-matchers.ts @@ -1,7 +1,7 @@ import type { MatcherContext } from 'expect' import { toMatchInlineSnapshot } from 'jest-snapshot' import { - assertHasRedbox, + waitForRedbox, getRedboxCallStack, getRedboxComponentStack, getRedboxDescription, @@ -260,7 +260,7 @@ expect.extend({ this.dontThrow = () => {} try { - await assertHasRedbox(browser) + await waitForRedbox(browser) } catch (cause) { // argument length is relevant. // Jest will update absent snapshots but fail if you specify a snapshot even if undefined. @@ -318,15 +318,15 @@ expect.extend({ return toMatchInlineSnapshot.call( this, String(cause.message) - // Should switch to `toDisplayRedbox` not `assertHasRedbox` - .replace('assertHasRedbox', 'toDisplayRedbox') + // Should switch to `toDisplayRedbox` not `waitForRedbox` + .replace('waitForRedbox', 'toDisplayRedbox') ) } else { return toMatchInlineSnapshot.call( this, String(cause.message) - // Should switch to `toDisplayRedbox` not `assertHasRedbox` - .replace('assertHasRedbox', 'toDisplayRedbox'), + // Should switch to `toDisplayRedbox` not `waitForRedbox` + .replace('waitForRedbox', 'toDisplayRedbox'), expectedRedboxSnapshot ) } diff --git a/test/lib/development-sandbox.ts b/test/lib/development-sandbox.ts index c6308081c55a12..4cf16a3d6ab113 100644 --- a/test/lib/development-sandbox.ts +++ b/test/lib/development-sandbox.ts @@ -5,8 +5,8 @@ import { getRedboxHeader, getRedboxSource, getVersionCheckerText, - assertHasRedbox, - assertNoRedbox, + waitForRedbox, + waitForNoRedbox, waitFor, openRedbox, getRedboxDescriptionWarning, @@ -131,11 +131,11 @@ export async function createSandbox( await next.renameFolder(...args) }, evaluate, - async assertHasRedbox() { - return assertHasRedbox(browser) + async waitForRedbox() { + return waitForRedbox(browser) }, - async assertNoRedbox() { - return assertNoRedbox(browser) + async waitForNoRedbox() { + return waitForNoRedbox(browser) }, async openRedbox() { return openRedbox(browser) diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts index 0bdf1fc7836876..05177d0aa80e51 100644 --- a/test/lib/next-test-utils.ts +++ b/test/lib/next-test-utils.ts @@ -814,13 +814,13 @@ export async function retry( throw new Error('Duration cannot be less than 0.') } -export async function assertHasRedbox(browser: Playwright) { +export async function waitForRedbox(browser: Playwright) { const redbox = browser.locateRedbox() try { await redbox.waitFor({ timeout: 5000 }) } catch (errorCause) { const error = new Error('Expected Redbox but found no visible one.') - Error.captureStackTrace(error, assertHasRedbox) + Error.captureStackTrace(error, waitForRedbox) throw error } @@ -832,12 +832,12 @@ export async function assertHasRedbox(browser: Playwright) { const error = new Error('Redbox still had suspended content after 10s', { cause, }) - Error.captureStackTrace(error, assertHasRedbox) + Error.captureStackTrace(error, waitForRedbox) throw error } } -export async function assertNoRedbox( +export async function waitForNoRedbox( browser: Playwright, { waitInMs = 5000 }: { waitInMs?: number } = {} ) { @@ -857,12 +857,12 @@ export async function assertNoRedbox( `description: ${redboxDescription}\n` + `source: ${redboxSource}` ) - Error.captureStackTrace(error, assertNoRedbox) + Error.captureStackTrace(error, waitForNoRedbox) throw error } } -export async function assertNoErrorToast(browser: Playwright): Promise { +export async function waitForNoErrorToast(browser: Playwright): Promise { let didOpenRedbox = false try { @@ -873,9 +873,9 @@ export async function assertNoErrorToast(browser: Playwright): Promise { } if (didOpenRedbox) { - // If a redbox was opened unexpectedly, we use the `assertNoRedbox` helper + // If a redbox was opened unexpectedly, we use the `waitForNoRedbox` helper // to print a useful error message containing the redbox contents. - await assertNoRedbox(browser, { + await waitForNoRedbox(browser, { // We already know the redbox is open, so we can skip waiting for it. waitInMs: 0, }) @@ -912,13 +912,13 @@ export async function getToastErrorCount(browser: Playwright): Promise { /** * Has retried version of {@link hasErrorToast} built-in. - * Success implies {@link assertHasRedbox}. + * Success implies {@link waitForRedbox}. */ export async function openRedbox(browser: Playwright): Promise { const redbox = browser.locateRedbox() if (await redbox.isVisible()) { const error = new Error( - 'Redbox is already open. Use `assertHasRedbox` instead.' + 'Redbox is already open. Use `waitForRedbox` instead.' ) Error.captureStackTrace(error, openRedbox) throw error @@ -931,19 +931,19 @@ export async function openRedbox(browser: Playwright): Promise { Error.captureStackTrace(error, openRedbox) throw error } - await assertHasRedbox(browser) + await waitForRedbox(browser) } -export async function openDevToolsIndicatorPopover( +export async function toggleDevToolsIndicatorPopover( browser: Playwright ): Promise { - const devToolsIndicator = await assertHasDevToolsIndicator(browser) + const devToolsIndicator = await waitForDevToolsIndicator(browser) try { await devToolsIndicator.click() } catch (cause) { - const error = new Error('No DevTools Indicator to open.', { cause }) - Error.captureStackTrace(error, openDevToolsIndicatorPopover) + const error = new Error('No DevTools Indicator to toggle.', { cause }) + Error.captureStackTrace(error, toggleDevToolsIndicatorPopover) throw error } } @@ -957,7 +957,7 @@ export async function getSegmentExplorerRoute(browser: Playwright) { export async function getSegmentExplorerContent(browser: Playwright) { // open the devtool button - await openDevToolsIndicatorPopover(browser) + await toggleDevToolsIndicatorPopover(browser) // open the segment explorer await browser.elementByCss('[data-segment-explorer]').click() @@ -995,7 +995,7 @@ export async function hasDevToolsPanel(browser: Playwright) { return result } -export async function assertHasDevToolsIndicator(browser: Playwright) { +export async function waitForDevToolsIndicator(browser: Playwright) { const devToolsIndicator = browser.locateDevToolsIndicator() try { await devToolsIndicator.waitFor({ timeout: 5000 }) @@ -1003,7 +1003,7 @@ export async function assertHasDevToolsIndicator(browser: Playwright) { const error = new Error( 'Expected DevTools Indicator but found no visible one.' ) - Error.captureStackTrace(error, assertHasDevToolsIndicator) + Error.captureStackTrace(error, waitForDevToolsIndicator) throw error } @@ -1022,37 +1022,39 @@ export async function assertNoDevToolsIndicator(browser: Playwright) { } } -export async function assertStaticIndicator( +export async function waitForStaticIndicator( browser: Playwright, expectedRouteType: 'Static' | 'Dynamic' | undefined ): Promise { - await openDevToolsIndicatorPopover(browser) + await toggleDevToolsIndicatorPopover(browser) - const routeType = await browser.eval(() => { - const portal = [].slice - .call(document.querySelectorAll('nextjs-portal')) - .find((p) => p.shadowRoot.querySelector('[data-nextjs-toast]')) - - return ( - portal?.shadowRoot - // 'Route\nStatic' || 'Route\nDynamic' - ?.querySelector('[data-nextjs-route-type]') - ?.innerText.split('\n') - .pop() - ) - }) - - if (routeType !== expectedRouteType) { - if (expectedRouteType) { - throw new Error( - `Expected static indicator with route type ${expectedRouteType}, found ${routeType} instead.` - ) - } else { - throw new Error( - `Expected no static indicator, found ${routeType} instead.` + await retry(async () => { + const routeType = await browser.eval(() => { + const portal = [].slice + .call(document.querySelectorAll('nextjs-portal')) + .find((p) => p.shadowRoot.querySelector('[data-nextjs-toast]')) + + return ( + portal?.shadowRoot + // 'Route\nStatic' || 'Route\nDynamic' + ?.querySelector('[data-nextjs-route-type]') + ?.innerText.split('\n') + .pop() ) + }) + + if (routeType !== expectedRouteType) { + if (expectedRouteType) { + throw new Error( + `Expected static indicator with route type ${expectedRouteType}, found ${routeType} instead.` + ) + } else { + throw new Error( + `Expected no static indicator, found ${routeType} instead.` + ) + } } - } + }) } export function getRedboxHeader(browser: Playwright): Promise {