diff --git a/test/development/acceptance-app/rsc-runtime-errors.test.ts b/test/development/acceptance-app/rsc-runtime-errors.test.ts
index 644d297517..d11dbf4502 100644
--- a/test/development/acceptance-app/rsc-runtime-errors.test.ts
+++ b/test/development/acceptance-app/rsc-runtime-errors.test.ts
@@ -1,6 +1,6 @@
import path from 'path'
import { outdent } from 'outdent'
-import { FileRef, createNextDescribe } from 'e2e-utils'
+import { FileRef, nextTestSetup } from 'e2e-utils'
import {
check,
getRedboxDescription,
@@ -10,41 +10,40 @@ import {
retry,
} from 'next-test-utils'
-createNextDescribe(
- 'Error overlay - RSC runtime errors',
- {
+describe('Error overlay - RSC runtime errors', () => {
+ const { next } = nextTestSetup({
files: new FileRef(path.join(__dirname, 'fixtures', 'rsc-runtime-errors')),
- },
- ({ next }) => {
- it('should show runtime errors if invalid client API from node_modules is executed', async () => {
- await next.patchFile(
- 'app/server/page.js',
- outdent`
+ })
+
+ it('should show runtime errors if invalid client API from node_modules is executed', async () => {
+ await next.patchFile(
+ 'app/server/page.js',
+ outdent`
import { callClientApi } from 'client-package'
export default function Page() {
callClientApi()
return 'page'
}
`
- )
+ )
- const browser = await next.browser('/server')
+ const browser = await next.browser('/server')
- await check(
- async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
- /success/
- )
- const errorDescription = await getRedboxDescription(browser)
+ await check(
+ async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
+ /success/
+ )
+ const errorDescription = await getRedboxDescription(browser)
- expect(errorDescription).toContain(
- `Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component`
- )
- })
+ expect(errorDescription).toContain(
+ `Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component`
+ )
+ })
- it('should show runtime errors if invalid server API from node_modules is executed', async () => {
- await next.patchFile(
- 'app/client/page.js',
- outdent`
+ it('should show runtime errors if invalid server API from node_modules is executed', async () => {
+ await next.patchFile(
+ 'app/client/page.js',
+ outdent`
'use client'
import { callServerApi } from 'server-package'
export default function Page() {
@@ -52,101 +51,100 @@ createNextDescribe(
return 'page'
}
`
- )
+ )
- const browser = await next.browser('/client')
+ const browser = await next.browser('/client')
- await check(
- async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
- /success/
- )
- const errorDescription = await getRedboxDescription(browser)
+ await check(
+ async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
+ /success/
+ )
+ const errorDescription = await getRedboxDescription(browser)
- expect(errorDescription).toContain(
- 'Error: `cookies` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context'
- )
- })
+ expect(errorDescription).toContain(
+ 'Error: `cookies` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context'
+ )
+ })
- it('should show source code for jsx errors from server component', async () => {
- await next.patchFile(
- 'app/server/page.js',
- outdent`
+ it('should show source code for jsx errors from server component', async () => {
+ await next.patchFile(
+ 'app/server/page.js',
+ outdent`
export default function Page() {
return
{alert('warn')}
}
`
- )
+ )
- const browser = await next.browser('/server')
- await check(
- async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
- /success/
- )
+ const browser = await next.browser('/server')
+ await check(
+ async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
+ /success/
+ )
- const errorDescription = await getRedboxDescription(browser)
+ const errorDescription = await getRedboxDescription(browser)
- expect(errorDescription).toContain(`Error: alert is not defined`)
- })
+ expect(errorDescription).toContain(`Error: alert is not defined`)
+ })
- it('should show the userland code error trace when fetch failed error occurred', async () => {
- await next.patchFile(
- 'app/server/page.js',
- outdent`
+ it('should show the userland code error trace when fetch failed error occurred', async () => {
+ await next.patchFile(
+ 'app/server/page.js',
+ outdent`
export default async function Page() {
await fetch('http://locahost:3000/xxxx')
return 'page'
}
`
- )
- const browser = await next.browser('/server')
- await check(
- async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
- /success/
- )
+ )
+ const browser = await next.browser('/server')
+ await check(
+ async () => ((await hasRedbox(browser)) ? 'success' : 'fail'),
+ /success/
+ )
- const source = await getRedboxSource(browser)
- // Can show the original source code
- expect(source).toContain('app/server/page.js')
- expect(source).toContain(`await fetch('http://locahost:3000/xxxx')`)
- })
+ const source = await getRedboxSource(browser)
+ // Can show the original source code
+ expect(source).toContain('app/server/page.js')
+ expect(source).toContain(`await fetch('http://locahost:3000/xxxx')`)
+ })
- it('should contain nextjs version check in error overlay', async () => {
- await next.patchFile(
- 'app/server/page.js',
- outdent`
+ it('should contain nextjs version check in error overlay', async () => {
+ await next.patchFile(
+ 'app/server/page.js',
+ outdent`
export default function Page() {
throw new Error('test')
}
`
- )
- const browser = await next.browser('/server')
+ )
+ const browser = await next.browser('/server')
- await retry(async () => {
- expect(await hasRedbox(browser)).toBe(true)
- })
- const versionText = await getVersionCheckerText(browser)
- await expect(versionText).toMatch(/Next.js \([\w.-]+\)/)
+ await retry(async () => {
+ expect(await hasRedbox(browser)).toBe(true)
})
+ const versionText = await getVersionCheckerText(browser)
+ await expect(versionText).toMatch(/Next.js \([\w.-]+\)/)
+ })
- it('should not show the bundle layer info in the file trace', async () => {
- await next.patchFile(
- 'app/server/page.js',
- outdent`
+ it('should not show the bundle layer info in the file trace', async () => {
+ await next.patchFile(
+ 'app/server/page.js',
+ outdent`
export default function Page() {
throw new Error('test')
}
`
- )
- const browser = await next.browser('/server')
+ )
+ const browser = await next.browser('/server')
- await retry(async () => {
- expect(await hasRedbox(browser)).toBe(true)
- })
- const source = await getRedboxSource(browser)
- expect(source).toContain('app/server/page.js')
- expect(source).not.toContain('//app/server/page.js')
- // Does not contain webpack traces in file path
- expect(source).not.toMatch(/webpack(-internal:)?\/\//)
+ await retry(async () => {
+ expect(await hasRedbox(browser)).toBe(true)
})
- }
-)
+ const source = await getRedboxSource(browser)
+ expect(source).toContain('app/server/page.js')
+ expect(source).not.toContain('//app/server/page.js')
+ // Does not contain webpack traces in file path
+ expect(source).not.toMatch(/webpack(-internal:)?\/\//)
+ })
+})
diff --git a/test/development/acceptance/component-stack.test.ts b/test/development/acceptance/component-stack.test.ts
index 65fca9d4c3..7553c7c63a 100644
--- a/test/development/acceptance/component-stack.test.ts
+++ b/test/development/acceptance/component-stack.test.ts
@@ -1,21 +1,20 @@
/* eslint-env jest */
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { getRedboxComponentStack, hasRedbox } from 'next-test-utils'
import path from 'path'
-createNextDescribe(
- 'Component Stack in error overlay',
- {
+describe('Component Stack in error overlay', () => {
+ const { next } = nextTestSetup({
files: path.join(__dirname, 'fixtures', 'component-stack'),
- },
- ({ next }) => {
- it('should show a component stack on hydration error', async () => {
- const browser = await next.browser('/')
+ })
- expect(await hasRedbox(browser)).toBe(true)
+ it('should show a component stack on hydration error', async () => {
+ const browser = await next.browser('/')
- if (process.env.TURBOPACK) {
- expect(await getRedboxComponentStack(browser)).toMatchInlineSnapshot(`
+ expect(await hasRedbox(browser)).toBe(true)
+
+ if (process.env.TURBOPACK) {
+ expect(await getRedboxComponentStack(browser)).toMatchInlineSnapshot(`
"...
@@ -26,8 +25,8 @@ createNextDescribe(
"server"
"client""
`)
- } else {
- expect(await getRedboxComponentStack(browser)).toMatchInlineSnapshot(`
+ } else {
+ expect(await getRedboxComponentStack(browser)).toMatchInlineSnapshot(`
"
@@ -36,7 +35,6 @@ createNextDescribe(
"server"
"client""
`)
- }
- })
- }
-)
+ }
+ })
+})
diff --git a/test/development/app-dir/app-routes-error/index.test.ts b/test/development/app-dir/app-routes-error/index.test.ts
index 8e7c6ec3e5..22221f4632 100644
--- a/test/development/app-dir/app-routes-error/index.test.ts
+++ b/test/development/app-dir/app-routes-error/index.test.ts
@@ -1,40 +1,38 @@
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { check } from 'next-test-utils'
-createNextDescribe(
- 'app-dir - app routes errors',
- {
+describe('app-dir - app routes errors', () => {
+ const { next } = nextTestSetup({
files: __dirname,
- },
- ({ next }) => {
- describe('bad lowercase exports', () => {
- it.each([
- ['get'],
- ['head'],
- ['options'],
- ['post'],
- ['put'],
- ['delete'],
- ['patch'],
- ])(
- 'should print an error when using lowercase %p in dev',
- async (method: string) => {
- await next.fetch('/lowercase/' + method)
+ })
- await check(() => {
- expect(next.cliOutput).toContain(
- `Detected lowercase method '${method}' in`
- )
- expect(next.cliOutput).toContain(
- `Export the uppercase '${method.toUpperCase()}' method name to fix this error.`
- )
- expect(next.cliOutput).toMatch(
- /Detected lowercase method '.+' in '.+\/route\.js'\. Export the uppercase '.+' method name to fix this error\./
- )
- return 'yes'
- }, 'yes')
- }
- )
- })
- }
-)
+ describe('bad lowercase exports', () => {
+ it.each([
+ ['get'],
+ ['head'],
+ ['options'],
+ ['post'],
+ ['put'],
+ ['delete'],
+ ['patch'],
+ ])(
+ 'should print an error when using lowercase %p in dev',
+ async (method: string) => {
+ await next.fetch('/lowercase/' + method)
+
+ await check(() => {
+ expect(next.cliOutput).toContain(
+ `Detected lowercase method '${method}' in`
+ )
+ expect(next.cliOutput).toContain(
+ `Export the uppercase '${method.toUpperCase()}' method name to fix this error.`
+ )
+ expect(next.cliOutput).toMatch(
+ /Detected lowercase method '.+' in '.+\/route\.js'\. Export the uppercase '.+' method name to fix this error\./
+ )
+ return 'yes'
+ }, 'yes')
+ }
+ )
+ })
+})
diff --git a/test/development/app-dir/dynamic-error-trace/index.test.ts b/test/development/app-dir/dynamic-error-trace/index.test.ts
index 607a92b769..6ec0d6191a 100644
--- a/test/development/app-dir/dynamic-error-trace/index.test.ts
+++ b/test/development/app-dir/dynamic-error-trace/index.test.ts
@@ -1,4 +1,4 @@
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import {
getRedboxCallStack,
hasRedbox,
@@ -7,9 +7,8 @@ import {
getRedboxSource,
} from 'next-test-utils'
-createNextDescribe(
- 'app dir - dynamic error trace',
- {
+describe('app dir - dynamic error trace', () => {
+ const { next, skipped } = nextTestSetup({
files: __dirname,
dependencies: {
swr: 'latest',
@@ -25,18 +24,18 @@ createNextDescribe(
startCommand: (global as any).isNextDev ? 'pnpm dev' : 'pnpm start',
buildCommand: 'pnpm build',
skipDeployment: true,
- },
- ({ next }) => {
- it('should show the error trace', async () => {
- const browser = await next.browser('/')
- await hasRedbox(browser)
- await expandCallStack(browser)
- const callStack = await getRedboxCallStack(browser)
+ })
+ if (skipped) return
- expect(callStack).toContain('node_modules/headers-lib/index.mjs')
+ it('should show the error trace', async () => {
+ const browser = await next.browser('/')
+ await hasRedbox(browser)
+ await expandCallStack(browser)
+ const callStack = await getRedboxCallStack(browser)
- const source = await getRedboxSource(browser)
- expect(source).toContain('app/lib.js')
- })
- }
-)
+ expect(callStack).toContain('node_modules/headers-lib/index.mjs')
+
+ const source = await getRedboxSource(browser)
+ expect(source).toContain('app/lib.js')
+ })
+})
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 756bc2c876..37ef617add 100644
--- a/test/development/app-dir/edge-errors-hmr/index.test.ts
+++ b/test/development/app-dir/edge-errors-hmr/index.test.ts
@@ -1,40 +1,38 @@
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { hasRedbox } from 'next-test-utils'
-createNextDescribe(
- 'develop - app-dir - edge errros hmr',
- {
+describe('develop - app-dir - edge errros hmr', () => {
+ const { next } = nextTestSetup({
files: __dirname,
- },
- ({ next }) => {
- it('should recover from build errors when server component error', async () => {
- const browser = await next.browser('/')
- const clientComponentSource = await next.readFile('app/comp.server.js')
+ })
- await next.patchFile('app/comp.server.js', (content) => {
- return content.replace('{/* < */}', '<') // uncomment
- })
+ it('should recover from build errors when server component error', async () => {
+ const browser = await next.browser('/')
+ const clientComponentSource = await next.readFile('app/comp.server.js')
- expect(await hasRedbox(browser)).toBe(true)
-
- await next.patchFile('app/comp.server.js', clientComponentSource)
-
- expect(await hasRedbox(browser)).toBe(false)
+ await next.patchFile('app/comp.server.js', (content) => {
+ return content.replace('{/* < */}', '<') // uncomment
})
- it('should recover from build errors when client component error', async () => {
- const browser = await next.browser('/')
- const clientComponentSource = await next.readFile('app/comp.client.js')
+ expect(await hasRedbox(browser)).toBe(true)
- await next.patchFile('app/comp.client.js', (content) => {
- return content.replace('{/* < */}', '<') // uncomment
- })
+ await next.patchFile('app/comp.server.js', clientComponentSource)
- expect(await hasRedbox(browser)).toBe(true)
+ expect(await hasRedbox(browser)).toBe(false)
+ })
- await next.patchFile('app/comp.client.js', clientComponentSource)
+ it('should recover from build errors when client component error', async () => {
+ const browser = await next.browser('/')
+ const clientComponentSource = await next.readFile('app/comp.client.js')
- expect(await hasRedbox(browser)).toBe(false)
+ await next.patchFile('app/comp.client.js', (content) => {
+ return content.replace('{/* < */}', '<') // uncomment
})
- }
-)
+
+ expect(await hasRedbox(browser)).toBe(true)
+
+ await next.patchFile('app/comp.client.js', clientComponentSource)
+
+ expect(await hasRedbox(browser)).toBe(false)
+ })
+})
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 d204c1d1b1..8e0c038b35 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,28 +1,26 @@
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { hasRedbox } from 'next-test-utils'
-createNextDescribe(
- 'HMR Move File',
- {
+describe('HMR Move File', () => {
+ const { next } = nextTestSetup({
files: __dirname,
- },
- ({ next }) => {
- it('should work when moving a component to another directory', async () => {
- const browser = await next.browser('/')
- expect(await browser.elementByCss('#hello-world-button').text()).toBe(
- 'hello world'
- )
+ })
- await next.renameFile('app/button.tsx', 'app/button2.tsx')
- await next.patchFile('app/page.tsx', (content) =>
- content.replace('./button', './button2')
- )
+ it('should work when moving a component to another directory', async () => {
+ const browser = await next.browser('/')
+ expect(await browser.elementByCss('#hello-world-button').text()).toBe(
+ 'hello world'
+ )
- expect(await hasRedbox(browser)).toBe(false)
+ await next.renameFile('app/button.tsx', 'app/button2.tsx')
+ await next.patchFile('app/page.tsx', (content) =>
+ content.replace('./button', './button2')
+ )
- expect(await browser.elementByCss('#hello-world-button').text()).toBe(
- 'hello world'
- )
- })
- }
-)
+ expect(await hasRedbox(browser)).toBe(false)
+
+ expect(await browser.elementByCss('#hello-world-button').text()).toBe(
+ 'hello world'
+ )
+ })
+})
diff --git a/test/development/app-dir/multiple-compiles-single-route/multiple-compiles-single-route.test.ts b/test/development/app-dir/multiple-compiles-single-route/multiple-compiles-single-route.test.ts
index b4a4090b06..2bd80803fa 100644
--- a/test/development/app-dir/multiple-compiles-single-route/multiple-compiles-single-route.test.ts
+++ b/test/development/app-dir/multiple-compiles-single-route/multiple-compiles-single-route.test.ts
@@ -1,20 +1,18 @@
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
-createNextDescribe(
- 'multiple-compiles-single-route',
- {
+describe('multiple-compiles-single-route', () => {
+ const { next } = nextTestSetup({
files: __dirname,
- },
- ({ next }) => {
- // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
- it('should not compile additional matching paths', async () => {
- const logs: string[] = []
- next.on('stdout', (log) => {
- logs.push(log)
- })
- await next.render('/about')
- // Check if `/[slug]` is mentioned in the logs as being compiled
- expect(logs.some((log) => log.includes('/[slug]'))).toBe(false)
+ })
+
+ // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
+ it('should not compile additional matching paths', async () => {
+ const logs: string[] = []
+ next.on('stdout', (log) => {
+ logs.push(log)
})
- }
-)
+ await next.render('/about')
+ // Check if `/[slug]` is mentioned in the logs as being compiled
+ expect(logs.some((log) => log.includes('/[slug]'))).toBe(false)
+ })
+})
diff --git a/test/development/app-dir/strict-mode-enabled-by-default/strict-mode-enabled-by-default.test.ts b/test/development/app-dir/strict-mode-enabled-by-default/strict-mode-enabled-by-default.test.ts
index 5f3d42c92f..95b88e6711 100644
--- a/test/development/app-dir/strict-mode-enabled-by-default/strict-mode-enabled-by-default.test.ts
+++ b/test/development/app-dir/strict-mode-enabled-by-default/strict-mode-enabled-by-default.test.ts
@@ -1,27 +1,24 @@
import { type BrowserInterface } from 'next-webdriver'
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { check } from 'next-test-utils'
-createNextDescribe(
- 'Strict Mode enabled by default',
- {
+describe('Strict Mode enabled by default', () => {
+ const { next } = nextTestSetup({
files: __dirname,
- },
- ({ next }) => {
- // experimental react is having issues with this use effect
- // @acdlite will take a look
- // TODO: remove this after react fixes the issue in experimental build.
- if (process.env.__NEXT_EXPERIMENTAL_PPR) {
- it('skip test for PPR', () => {})
- return
- }
- // Recommended for tests that need a full browser
- it('should work using browser', async () => {
- const browser: BrowserInterface = await next.browser('/')
- await check(async () => {
- const text = await browser.elementByCss('p').text()
- return text === '2' ? 'success' : `failed: ${text}`
- }, 'success')
- })
+ })
+ // experimental react is having issues with this use effect
+ // @acdlite will take a look
+ // TODO: remove this after react fixes the issue in experimental build.
+ if (process.env.__NEXT_EXPERIMENTAL_PPR) {
+ it('skip test for PPR', () => {})
+ return
}
-)
+ // Recommended for tests that need a full browser
+ it('should work using browser', async () => {
+ const browser: BrowserInterface = await next.browser('/')
+ await check(async () => {
+ const text = await browser.elementByCss('p').text()
+ return text === '2' ? 'success' : `failed: ${text}`
+ }, 'success')
+ })
+})
diff --git a/test/development/app-hmr/hmr.test.ts b/test/development/app-hmr/hmr.test.ts
index e40bc09b45..18cc88166d 100644
--- a/test/development/app-hmr/hmr.test.ts
+++ b/test/development/app-hmr/hmr.test.ts
@@ -1,96 +1,94 @@
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { check, waitFor } from 'next-test-utils'
const envFile = '.env.development.local'
-createNextDescribe(
- `app-dir-hmr`,
- {
+describe(`app-dir-hmr`, () => {
+ const { next } = nextTestSetup({
files: __dirname,
- },
- ({ next }) => {
- describe('filesystem changes', () => {
- it('should not continously poll when hitting a not found page', async () => {
- let requestCount = 0
+ })
- const browser = await next.browser('/does-not-exist', {
- beforePageLoad(page) {
- page.on('request', (request) => {
- const url = new URL(request.url())
- if (url.pathname === '/does-not-exist') {
- requestCount++
- }
- })
- },
- })
- const body = await browser.elementByCss('body').text()
- expect(body).toContain('404')
+ describe('filesystem changes', () => {
+ it('should not continously poll when hitting a not found page', async () => {
+ let requestCount = 0
- await waitFor(3000)
-
- expect(requestCount).toBe(1)
+ const browser = await next.browser('/does-not-exist', {
+ beforePageLoad(page) {
+ page.on('request', (request) => {
+ const url = new URL(request.url())
+ if (url.pathname === '/does-not-exist') {
+ requestCount++
+ }
+ })
+ },
})
+ const body = await browser.elementByCss('body').text()
+ expect(body).toContain('404')
- it('should not break when renaming a folder', async () => {
- const browser = await next.browser('/folder')
- const text = await browser.elementByCss('h1').text()
- expect(text).toBe('Hello')
+ await waitFor(3000)
- // Rename folder
- await next.renameFolder('app/folder', 'app/folder-renamed')
-
- try {
- // Should be 404 in a few seconds
- await check(async () => {
- const body = await browser.elementByCss('body').text()
- expect(body).toContain('404')
- return 'success'
- }, 'success')
-
- // The new page should be rendered
- const newHTML = await next.render('/folder-renamed')
- expect(newHTML).toContain('Hello')
- } finally {
- // Rename it back
- await next.renameFolder('app/folder-renamed', 'app/folder')
- }
- })
-
- it('should update server components pages when env files is changed (nodejs)', async () => {
- const envContent = await next.readFile(envFile)
- const browser = await next.browser('/env/node')
- expect(await browser.elementByCss('p').text()).toBe('mac')
- await next.patchFile(envFile, 'MY_DEVICE="ipad"')
-
- try {
- await check(async () => {
- expect(await browser.elementByCss('p').text()).toBe('ipad')
- return 'success'
- }, /success/)
- } finally {
- await next.patchFile(envFile, envContent)
- }
- })
-
- it('should update server components pages when env files is changed (edge)', async () => {
- const envContent = await next.readFile(envFile)
- const browser = await next.browser('/env/edge')
- expect(await browser.elementByCss('p').text()).toBe('mac')
- await next.patchFile(envFile, 'MY_DEVICE="ipad"')
-
- try {
- await check(async () => {
- expect(await browser.elementByCss('p').text()).toBe('ipad')
- return 'success'
- }, /success/)
- } finally {
- await next.patchFile(envFile, envContent)
- }
- })
-
- it('should have no unexpected action error for hmr', async () => {
- expect(next.cliOutput).not.toContain('Unexpected action')
- })
+ expect(requestCount).toBe(1)
})
- }
-)
+
+ it('should not break when renaming a folder', async () => {
+ const browser = await next.browser('/folder')
+ const text = await browser.elementByCss('h1').text()
+ expect(text).toBe('Hello')
+
+ // Rename folder
+ await next.renameFolder('app/folder', 'app/folder-renamed')
+
+ try {
+ // Should be 404 in a few seconds
+ await check(async () => {
+ const body = await browser.elementByCss('body').text()
+ expect(body).toContain('404')
+ return 'success'
+ }, 'success')
+
+ // The new page should be rendered
+ const newHTML = await next.render('/folder-renamed')
+ expect(newHTML).toContain('Hello')
+ } finally {
+ // Rename it back
+ await next.renameFolder('app/folder-renamed', 'app/folder')
+ }
+ })
+
+ it('should update server components pages when env files is changed (nodejs)', async () => {
+ const envContent = await next.readFile(envFile)
+ const browser = await next.browser('/env/node')
+ expect(await browser.elementByCss('p').text()).toBe('mac')
+ await next.patchFile(envFile, 'MY_DEVICE="ipad"')
+
+ try {
+ await check(async () => {
+ expect(await browser.elementByCss('p').text()).toBe('ipad')
+ return 'success'
+ }, /success/)
+ } finally {
+ await next.patchFile(envFile, envContent)
+ }
+ })
+
+ it('should update server components pages when env files is changed (edge)', async () => {
+ const envContent = await next.readFile(envFile)
+ const browser = await next.browser('/env/edge')
+ expect(await browser.elementByCss('p').text()).toBe('mac')
+ await next.patchFile(envFile, 'MY_DEVICE="ipad"')
+
+ try {
+ await check(async () => {
+ expect(await browser.elementByCss('p').text()).toBe('ipad')
+ return 'success'
+ }, /success/)
+ } finally {
+ await next.patchFile(envFile, envContent)
+ }
+ })
+
+ it('should have no unexpected action error for hmr', async () => {
+ expect(next.cliOutput).not.toContain('Unexpected action')
+ })
+ })
+})
diff --git a/test/development/app-render-error-log/app-render-error-log.test.ts b/test/development/app-render-error-log/app-render-error-log.test.ts
index f587fbf9a1..517193371d 100644
--- a/test/development/app-render-error-log/app-render-error-log.test.ts
+++ b/test/development/app-render-error-log/app-render-error-log.test.ts
@@ -1,42 +1,39 @@
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { check } from 'next-test-utils'
-createNextDescribe(
- 'app-render-error-log',
- {
+describe('app-render-error-log', () => {
+ const { next } = nextTestSetup({
files: __dirname,
- },
- ({ next }) => {
- it('should log the correct values on app-render error', async () => {
- const outputIndex = next.cliOutput.length
- await next.fetch('/')
+ })
+ it('should log the correct values on app-render error', async () => {
+ const outputIndex = next.cliOutput.length
+ await next.fetch('/')
- await check(() => next.cliOutput.slice(outputIndex), /at Page/)
- const cliOutput = next.cliOutput.slice(outputIndex)
+ await check(() => next.cliOutput.slice(outputIndex), /at Page/)
+ const cliOutput = next.cliOutput.slice(outputIndex)
- await check(() => cliOutput, /digest:/)
- expect(cliOutput).toInclude('Error: boom')
- expect(cliOutput).toInclude('at fn2 (./app/fn.ts')
- expect(cliOutput).toMatch(/at (Module\.)?fn1 \(\.\/app\/fn\.ts/)
- expect(cliOutput).toInclude('at Page (./app/page.tsx')
+ await check(() => cliOutput, /digest:/)
+ expect(cliOutput).toInclude('Error: boom')
+ expect(cliOutput).toInclude('at fn2 (./app/fn.ts')
+ expect(cliOutput).toMatch(/at (Module\.)?fn1 \(\.\/app\/fn\.ts/)
+ expect(cliOutput).toInclude('at Page (./app/page.tsx')
- expect(cliOutput).not.toInclude('webpack-internal')
- })
+ expect(cliOutput).not.toInclude('webpack-internal')
+ })
- it('should log the correct values on app-render error with edge runtime', async () => {
- const outputIndex = next.cliOutput.length
- await next.fetch('/edge')
+ it('should log the correct values on app-render error with edge runtime', async () => {
+ const outputIndex = next.cliOutput.length
+ await next.fetch('/edge')
- await check(() => next.cliOutput.slice(outputIndex), /at EdgePage/)
- const cliOutput = next.cliOutput.slice(outputIndex)
+ await check(() => next.cliOutput.slice(outputIndex), /at EdgePage/)
+ const cliOutput = next.cliOutput.slice(outputIndex)
- await check(() => cliOutput, /digest:/)
- expect(cliOutput).toInclude('Error: boom')
- expect(cliOutput).toInclude('at fn2 (./app/fn.ts')
- expect(cliOutput).toMatch(/at (Module\.)?fn1 \(\.\/app\/fn\.ts/)
- expect(cliOutput).toInclude('at EdgePage (./app/edge/page.tsx')
+ await check(() => cliOutput, /digest:/)
+ expect(cliOutput).toInclude('Error: boom')
+ expect(cliOutput).toInclude('at fn2 (./app/fn.ts')
+ expect(cliOutput).toMatch(/at (Module\.)?fn1 \(\.\/app\/fn\.ts/)
+ expect(cliOutput).toInclude('at EdgePage (./app/edge/page.tsx')
- expect(cliOutput).not.toInclude('webpack-internal')
- })
- }
-)
+ expect(cliOutput).not.toInclude('webpack-internal')
+ })
+})
diff --git a/test/development/basic/asset-prefix/asset-prefix.test.ts b/test/development/basic/asset-prefix/asset-prefix.test.ts
index 936314f535..80a52e5c33 100644
--- a/test/development/basic/asset-prefix/asset-prefix.test.ts
+++ b/test/development/basic/asset-prefix/asset-prefix.test.ts
@@ -1,28 +1,26 @@
import { join } from 'path'
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { check } from 'next-test-utils'
-createNextDescribe(
- 'asset-prefix',
- {
+describe('asset-prefix', () => {
+ const { next } = nextTestSetup({
files: join(__dirname, 'fixture'),
- },
- ({ next }) => {
- it('should load the app properly without reloading', async () => {
- const browser = await next.browser('/')
- await browser.eval(`window.__v = 1`)
+ })
- expect(await browser.elementByCss('div').text()).toBe('Hello World')
+ it('should load the app properly without reloading', async () => {
+ const browser = await next.browser('/')
+ await browser.eval(`window.__v = 1`)
- await check(async () => {
- const logs = await browser.log()
- const hasError = logs.some((log) =>
- log.message.includes('Failed to fetch')
- )
- return hasError ? 'error' : 'success'
- }, 'success')
+ expect(await browser.elementByCss('div').text()).toBe('Hello World')
- expect(await browser.eval(`window.__v`)).toBe(1)
- })
- }
-)
+ await check(async () => {
+ const logs = await browser.log()
+ const hasError = logs.some((log) =>
+ log.message.includes('Failed to fetch')
+ )
+ return hasError ? 'error' : 'success'
+ }, 'success')
+
+ expect(await browser.eval(`window.__v`)).toBe(1)
+ })
+})
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 054a7c8ca8..c6ba2ab60e 100644
--- a/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts
+++ b/test/development/basic/barrel-optimization/barrel-optimization-mui.test.ts
@@ -1,13 +1,13 @@
import { join } from 'path'
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { hasRedbox } from 'next-test-utils'
+
// Skipped in Turbopack, will be added later.
;(process.env.TURBOPACK ? describe.skip : describe)(
'Skipped in Turbopack',
() => {
- createNextDescribe(
- 'optimizePackageImports - mui',
- {
+ describe('optimizePackageImports - mui', () => {
+ const { next } = nextTestSetup({
env: {
NEXT_TEST_MODE: '1',
},
@@ -18,31 +18,30 @@ import { hasRedbox } from 'next-test-utils'
'@emotion/react': '11.11.1',
'@emotion/styled': '11.11.0',
},
- },
- ({ next }) => {
- it('should support MUI', async () => {
- let logs = ''
- next.on('stdout', (log) => {
- logs += log
- })
+ })
- // Ensure that MUI is working
- const $ = await next.render$('/mui')
- expect(await $('#button').text()).toContain('button')
- expect(await $('#typography').text()).toContain('typography')
-
- const browser = await next.browser('/mui')
- expect(await hasRedbox(browser)).toBe(false)
-
- const modules = [...logs.matchAll(/\((\d+) modules\)/g)]
- expect(modules.length).toBeGreaterThanOrEqual(1)
- for (const [, moduleCount] of modules) {
- // Ensure that the number of modules is less than 1500 - otherwise we're
- // importing the entire library.
- expect(parseInt(moduleCount)).toBeLessThan(1500)
- }
+ it('should support MUI', async () => {
+ let logs = ''
+ next.on('stdout', (log) => {
+ logs += log
})
- }
- )
+
+ // Ensure that MUI is working
+ const $ = await next.render$('/mui')
+ expect(await $('#button').text()).toContain('button')
+ expect(await $('#typography').text()).toContain('typography')
+
+ const browser = await next.browser('/mui')
+ expect(await hasRedbox(browser)).toBe(false)
+
+ const modules = [...logs.matchAll(/\((\d+) modules\)/g)]
+ expect(modules.length).toBeGreaterThanOrEqual(1)
+ for (const [, moduleCount] of modules) {
+ // Ensure that the number of modules is less than 1500 - otherwise we're
+ // importing the entire library.
+ expect(parseInt(moduleCount)).toBeLessThan(1500)
+ }
+ })
+ })
}
)
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 dbe3c32246..442bc481fc 100644
--- a/test/development/basic/barrel-optimization/barrel-optimization-tremor.test.ts
+++ b/test/development/basic/barrel-optimization/barrel-optimization-tremor.test.ts
@@ -1,10 +1,9 @@
import { join } from 'path'
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
import { hasRedbox } from 'next-test-utils'
-createNextDescribe(
- 'optimizePackageImports - mui',
- {
+describe('optimizePackageImports - mui', () => {
+ const { next } = nextTestSetup({
env: {
NEXT_TEST_MODE: '1',
},
@@ -16,12 +15,11 @@ createNextDescribe(
'@remixicon/react': '^4.2.0',
'@tremor/react': '^3.14.1',
},
- },
- ({ next }) => {
- it('should work', async () => {
- // Without barrel optimization, the reproduction breaks.
- const browser = await next.browser('/')
- expect(await hasRedbox(browser)).toBe(false)
- })
- }
-)
+ })
+
+ it('should work', async () => {
+ // Without barrel optimization, the reproduction breaks.
+ const browser = await next.browser('/')
+ expect(await hasRedbox(browser)).toBe(false)
+ })
+})
diff --git a/test/development/basic/barrel-optimization/barrel-optimization.test.ts b/test/development/basic/barrel-optimization/barrel-optimization.test.ts
index 60ee953b56..ef263753b6 100644
--- a/test/development/basic/barrel-optimization/barrel-optimization.test.ts
+++ b/test/development/basic/barrel-optimization/barrel-optimization.test.ts
@@ -1,12 +1,11 @@
import { join } from 'path'
-import { createNextDescribe } from 'e2e-utils'
+import { nextTestSetup } from 'e2e-utils'
// Skipped in Turbopack, will be added later.
;(process.env.TURBOPACK ? describe.skip : describe)(
'Skipped in Turbopack',
() => {
- createNextDescribe(
- 'optimizePackageImports - basic',
- {
+ describe('optimizePackageImports - basic', () => {
+ const { next } = nextTestSetup({
env: {
NEXT_TEST_MODE: '1',
},
@@ -18,114 +17,113 @@ import { createNextDescribe } from 'e2e-utils'
'@visx/visx': '3.3.0',
'recursive-barrel': '1.0.0',
},
- },
- ({ next }) => {
- it('app - should render the icons correctly without creating all the modules', async () => {
- let logs = ''
- next.on('stdout', (log) => {
- logs += log
- })
+ })
- const html = await next.render('/')
-
- // Ensure the icons are rendered
- expect(html).toContain('