Files
next.js/test/e2e/dynamic-optional-routing/dynamic-optional-routing.test.ts
Tim NeutkensandGitHub 8141dcf12e Convert test/integration to isolated tests (#93247)
### What?

Converts every test under `test/integration/` to an isolated test
running through `nextTestSetup` (under `test/e2e/`, `test/production/`,
`test/development/`, or `test/unit/`), then deletes `test/integration/`
along with the legacy CI orchestration that was specific to it.

- `test/integration/` removed entirely (~327 test suites)
- New isolated suites added across the existing folders:
  - `test/e2e/` — 175
  - `test/production/` — 130
  - `test/development/` — 43
  - `test/unit/` — 1
- `.github/workflows/build_and_test.yml` and `run-tests.js` no longer
have any `integration` branches
- `nextTestSetup` gained a `baseUrl` option on `next.browser()` so a
small number of tests that drive their own proxy/static-export server
can keep using `next.browser(...)` instead of importing `next-webdriver`
directly

### Why?

`test/integration/` predated `nextTestSetup` and ran tests directly
against the source checkout via custom helpers (`launchApp`,
`nextBuild`, `nextStart`, `runNextCommand`, `webdriver`, `fetchViaHTTP`,
…). Each suite hand-rolled its own dev/start/build orchestration,
fixture mutation, and process management.

The isolated test model used by the rest of the repo gives each suite an
isolated working directory containing a packed `next.tgz` install, a
uniform `next.start()` / `next.build()` / `next.fetch()` /
`next.browser()` API, and the same lifecycle for dev, start, and deploy
modes — so a single set of assertions covers all three. Deploy-mode
skips and per-feature gates are expressed declaratively
(`skipDeployment`, `disableAutoSkewProtection`, `if (skipped) return`)
instead of branching on `process.env`.

Removing `test/integration/` lets us:

- Delete the bespoke orchestration code in the CI workflow and
`run-tests.js`
- Run every converted suite consistently in dev, start, and deploy modes
(where applicable)
- Reproduce every test locally with the same `pnpm
test-{dev,start}-{turbo,webpack}` commands; no separate `integration`
path
- Open the door to running `test/production` against deployments in the
future (the converted suites already declare `skipDeployment` so they
can be flipped on)

### How?

Mechanical conversion per suite, with targeted clean-ups:

1. **Per-suite conversion.** Each
`test/integration/<name>/test/index.test.{js,ts}` was rewritten into a
single `<name>.test.ts` under the right folder based on what the
original exercised:
   - `launchApp` / dev-only assertions → `test/development/`
- `nextBuild` + `nextStart` / start-only assertions → `test/production/`
   - Both → `test/e2e/`
- The one pure jsdom render check (`link-without-router`) → `test/unit/`

2. **API mapping.** Custom helpers were replaced by `nextTestSetup`
equivalents: `launchApp` → `next.start()`, `nextBuild` → `next.build()`,
`runNextCommand` → `next.runCommand`, `fetchViaHTTP` → `next.fetch`,
`webdriver(...)` → `next.browser(...)`. Fixture mutations switched from
raw `fs.writeFile`/`fs.rename` to `next.patchFile` (with the 3-arg
`runWithTempContent` callback when the change has a defined scope) and
`next.deleteFile`.

3. **Deploy-mode handling.** Suites that can't run in deploy mode (use
`patchFile` / `next.build()` / depend on local CLI output) declare
`skipDeployment: true` and early-return on the `skipped` boolean. Suites
where Vercel's edge mutates URLs (`&dpl=`, immutable assets) declare
`disableAutoSkewProtection: true`.

4. **`next.browser({ baseUrl })`.** A handful of tests
(`prerender-export`, `cdn-cache-busting`, `preload-viewport`, both
`react-virtualized` suites) need to drive a separate server (a
static-export server or an `http-proxy` instance) rather than the
Next.js process. Instead of importing `next-webdriver` directly, those
tests now pass `{ baseUrl: <port|url> }` to `next.browser()`. For the
proxy cases, the proxy was moved into `server.js` inside the fixture and
`http-proxy` declared via the `dependencies` option of `nextTestSetup`,
so the test runs with a fully isolated dependency graph.

5. **CI clean-up.** With `test/integration` gone, the `test
integration*` jobs and `integration-tests-manifest`-related logic in
`.github/workflows/build_and_test.yml` were removed, and `run-tests.js`
no longer has the `integration` test-folder branch.

6. **Validation.** The PR was iterated against multiple full CI runs;
the remaining failures on the latest run are pre-existing flakes
(segment-cache 60s `act` timeouts in turbopack-prod) or transient
infrastructure issues unrelated to the conversion.
2026-05-11 13:55:47 +02:00

299 lines
10 KiB
TypeScript

import cheerio from 'cheerio'
import { nextTestSetup, isNextDev } from 'e2e-utils'
import { retry } from 'next-test-utils'
describe('Dynamic Optional Routing', () => {
const { next, skipped } = nextTestSetup({
files: __dirname,
skipDeployment: true,
})
if (skipped) return
it('should render catch-all top-level route with multiple segments', async () => {
const html = await next.render('/hello/world')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('top level route param: [hello|world]')
})
it('should render catch-all top-level route with single segment', async () => {
const html = await next.render('/hello')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('top level route param: [hello]')
})
it('should render catch-all top-level route with no segments', async () => {
const html = await next.render('/')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('top level route param: undefined')
})
it('should render catch-all nested route with multiple segments', async () => {
const html = await next.render('/nested/hello/world')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('nested route param: [hello|world]')
})
it('should render catch-all nested route with single segment', async () => {
const html = await next.render('/nested/hello')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('nested route param: [hello]')
})
it('should render catch-all nested route with no segments', async () => {
const html = await next.render('/nested')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('nested route param: undefined')
})
it('should render catch-all nested route with no segments and leading slash', async () => {
const html = await next.render('/nested/')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('nested route param: undefined')
})
it('should match catch-all api route with multiple segments', async () => {
const res = await next.fetch('/api/post/ab/cd')
expect(res.status).toBe(200)
expect(await res.json()).toEqual({ slug: ['ab', 'cd'] })
})
it('should match catch-all api route with single segment', async () => {
const res = await next.fetch('/api/post/a')
expect(res.status).toBe(200)
expect(await res.json()).toEqual({ slug: ['a'] })
})
it('should match catch-all api route with no segments', async () => {
const res = await next.fetch('/api/post')
expect(res.status).toBe(200)
expect(await res.json()).toEqual({})
})
it('should match catch-all api route with no segments and leading slash', async () => {
const res = await next.fetch('/api/post/')
expect(res.status).toBe(200)
expect(await res.json()).toEqual({})
})
it('should handle getStaticPaths no segments', async () => {
const html = await next.render('/get-static-paths')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp route: undefined')
})
it('should handle getStaticPaths no segments and trailing slash', async () => {
const html = await next.render('/get-static-paths/')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp route: undefined')
})
it('should handle getStaticPaths 1 segment', async () => {
const html = await next.render('/get-static-paths/p1')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp route: [p1]')
})
it('should handle getStaticPaths 1 segment and trailing slash', async () => {
const html = await next.render('/get-static-paths/p1/')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp route: [p1]')
})
it('should handle getStaticPaths 2 segments', async () => {
const html = await next.render('/get-static-paths/p2/p3')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp route: [p2|p3]')
})
it('should handle getStaticPaths 2 segments and trailing slash', async () => {
const html = await next.render('/get-static-paths/p2/p3/')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp route: [p2|p3]')
})
it('should fall back to top-level catch-all', async () => {
const html = await next.render('/get-static-paths/hello/world')
const $ = cheerio.load(html)
expect($('#route').text()).toBe(
'top level route param: [get-static-paths|hello|world]'
)
})
it('should match root path on undefined param', async () => {
const html = await next.render('/get-static-paths-undefined')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp undefined route: undefined')
})
it('should match root path on false param', async () => {
const html = await next.render('/get-static-paths-false')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp false route: undefined')
})
it('should match root path on null param', async () => {
const html = await next.render('/get-static-paths-null')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp null route: undefined')
})
it('should handle getStaticPaths with fallback no segments', async () => {
const html = await next.render('/get-static-paths-fallback')
const $ = cheerio.load(html)
expect($('#route').text()).toBe(
'gsp fallback route: undefined is not fallback'
)
})
it('should handle getStaticPaths with fallback 2 segments', async () => {
const html = await next.render('/get-static-paths-fallback/p2/p3')
const $ = cheerio.load(html)
expect($('#route').text()).toBe(
'gsp fallback route: [p2|p3] is not fallback'
)
})
it('should fallback correctly when fallback enabled', async () => {
const html = await next.render('/get-static-paths-fallback/hello/world')
const $ = cheerio.load(html)
expect($('#route').text()).toBe('gsp fallback route: undefined is fallback')
})
if (isNextDev) {
const DUMMY_PAGE = 'export default () => null'
it('should fail when optional route has index.js at root', async () => {
try {
await next.patchFile('pages/index.js', DUMMY_PAGE)
await retry(async () => {
expect(next.cliOutput).toMatch(
/You cannot define a route with the same specificity as a optional catch-all route/
)
})
} finally {
await next.deleteFile('pages/index.js')
}
})
it('should fail when optional route has same page at root', async () => {
try {
await next.patchFile('pages/nested.js', DUMMY_PAGE)
await retry(async () => {
expect(next.cliOutput).toMatch(
/You cannot define a route with the same specificity as a optional catch-all route/
)
})
} finally {
await next.deleteFile('pages/nested.js')
}
})
it('should fail when mixed with regular catch-all', async () => {
try {
await next.patchFile('pages/nested/[...param].js', DUMMY_PAGE)
await retry(async () => {
expect(next.cliOutput).toMatch(
/You cannot use both .+ at the same level/
)
})
} finally {
await next.deleteFile('pages/nested/[...param].js')
}
})
it('should fail when optional but no catch-all', async () => {
try {
await next.patchFile('pages/invalid/[[param]].js', DUMMY_PAGE)
await retry(async () => {
expect(next.cliOutput).toMatch(
/Optional route parameters are not yet supported/
)
})
} finally {
await next.deleteFile('pages/invalid/[[param]].js')
}
})
}
})
describe('Dynamic Optional Routing - build validation', () => {
const { next, skipped } = nextTestSetup({
files: __dirname,
skipStart: true,
skipDeployment: true,
})
if (skipped) return
const DUMMY_PAGE = 'export default () => null'
it('should fail to build when optional route has index.js at root', async () => {
await next.patchFile('pages/index.js', DUMMY_PAGE)
await next.build()
expect(next.cliOutput).toMatch(
/You cannot define a route with the same specificity as a optional catch-all route/
)
// Clean up for next test
await next.deleteFile('pages/index.js')
})
it('should fail to build when optional route has same page at root', async () => {
await next.patchFile('pages/nested.js', DUMMY_PAGE)
await next.build()
expect(next.cliOutput).toMatch(
/You cannot define a route with the same specificity as a optional catch-all route/
)
// Clean up for next test
await next.deleteFile('pages/nested.js')
})
it('should fail to build when mixed with regular catch-all', async () => {
await next.patchFile('pages/nested/[...param].js', DUMMY_PAGE)
await next.build()
expect(next.cliOutput).toMatch(/You cannot use both .+ at the same level/)
// Clean up for next test
await next.deleteFile('pages/nested/[...param].js')
})
it('should fail to build when optional but no catch-all', async () => {
await next.patchFile('pages/invalid/[[param]].js', DUMMY_PAGE)
await next.build()
expect(next.cliOutput).toMatch(
/Optional route parameters are not yet supported/
)
// Clean up for next test
await next.deleteFile('pages/invalid/[[param]].js')
})
it('should fail to build when param is not explicitly defined', async () => {
await next.patchFile(
'pages/invalid/[[...slug]].js',
`
export async function getStaticPaths() {
return {
paths: [
{ params: {} },
],
fallback: false,
}
}
export async function getStaticProps({ params }) {
return { props: { params } }
}
export default function Index(props) {
return (
<div>Invalid</div>
)
}
`
)
await next.build()
expect(next.cliOutput).toMatch(
'A required parameter (slug) was not provided as an array received undefined in getStaticPaths for /invalid/[[...slug]]'
)
// Clean up
await next.deleteFile('pages/invalid/[[...slug]].js')
})
})