mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Tim NeutkensandGitHub
8141dcf12e
### 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.
290 lines
8.3 KiB
TypeScript
290 lines
8.3 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
import { retry } from 'next-test-utils'
|
|
import fs from 'fs'
|
|
import { join } from 'path'
|
|
|
|
describe('Fallback path encoding', () => {
|
|
const { next, isNextDev, isNextStart } = nextTestSetup({
|
|
files: __dirname,
|
|
// Assertions don't apply to deploy mode (output differs vs. local Next.js server).
|
|
skipDeployment: true,
|
|
})
|
|
|
|
const urlPaths = [
|
|
'%2Fmy-post%2F',
|
|
'%252Fmy-post%252F',
|
|
'%2Bmy-post%2B',
|
|
'%3Fmy-post%3F',
|
|
'%26my-post%26',
|
|
encodeURIComponent('商業日語'),
|
|
encodeURIComponent(encodeURIComponent('商業日語')),
|
|
'%20my-post%20',
|
|
'%2Fsecond-post%2F',
|
|
'%2Bsecond-post%2B',
|
|
'%26second-post%26',
|
|
`mixed-${encodeURIComponent('商業日語')}`,
|
|
]
|
|
|
|
const prerenderedPaths = [
|
|
'%2Fmy-post%2F',
|
|
'%252Fmy-post%252F',
|
|
'+my-post+',
|
|
'%3Fmy-post%3F',
|
|
'&my-post&',
|
|
'商業日語',
|
|
encodeURIComponent('商業日語'),
|
|
' my-post ',
|
|
'%2Fsecond-post%2F',
|
|
'+second-post+',
|
|
'&second-post&',
|
|
'mixed-商業日語',
|
|
]
|
|
|
|
const modePaths = ['fallback-blocking', 'fallback-false', 'fallback-true']
|
|
|
|
if (isNextStart) {
|
|
it('should output paths correctly', async () => {
|
|
const pagesDir = join(next.testDir, '.next/server/pages')
|
|
for (const path of prerenderedPaths) {
|
|
for (const mode of modePaths) {
|
|
expect(fs.existsSync(join(pagesDir, mode, path + '.html'))).toBe(true)
|
|
expect(fs.existsSync(join(pagesDir, mode, path + '.json'))).toBe(true)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
if (isNextStart) {
|
|
it('should handle non-prerendered paths correctly', async () => {
|
|
const newUrlPaths = [
|
|
'%2Fanother-post%2F',
|
|
'%2Banother-post%2B',
|
|
'%3Fanother-post%3F',
|
|
'%26another-post%26',
|
|
encodeURIComponent('商業日語商業日語'),
|
|
]
|
|
|
|
const newPrerenderedPaths = [
|
|
'%2Fanother-post%2F',
|
|
'+another-post+',
|
|
'%3Fanother-post%3F',
|
|
'&another-post&',
|
|
'商業日語商業日語',
|
|
]
|
|
|
|
for (const mode of modePaths) {
|
|
for (let i = 0; i < newUrlPaths.length; i++) {
|
|
const testSlug = newUrlPaths[i]
|
|
|
|
const res = await next.fetch(
|
|
`/_next/data/${next.buildId}/${mode}/${testSlug}.json`
|
|
)
|
|
|
|
if (mode === 'fallback-false') {
|
|
expect(res.status).toBe(404)
|
|
} else {
|
|
expect(res.status).toBe(200)
|
|
|
|
const { pageProps: props } = await res.json()
|
|
|
|
expect(props.params).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
|
|
const pagesDir = join(next.testDir, '.next/server/pages')
|
|
const prerenderedPath = newPrerenderedPaths[i]
|
|
await retry(async () => {
|
|
expect(
|
|
fs.existsSync(join(pagesDir, mode, prerenderedPath + '.html'))
|
|
).toBe(true)
|
|
})
|
|
await retry(async () => {
|
|
expect(
|
|
fs.existsSync(join(pagesDir, mode, prerenderedPath + '.json'))
|
|
).toBe(true)
|
|
})
|
|
|
|
const browser = await next.browser(`/${mode}/${testSlug}`)
|
|
|
|
expect(
|
|
JSON.parse(await browser.elementByCss('#props').text()).params
|
|
).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
|
|
const browserRouter = JSON.parse(
|
|
await browser.elementByCss('#router').text()
|
|
)
|
|
|
|
expect(browserRouter.pathname).toBe(`/${mode}/[slug]`)
|
|
expect(browserRouter.asPath).toBe(`/${mode}/${testSlug}`)
|
|
expect(browserRouter.query).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
it('should respond with the prerendered pages correctly', async () => {
|
|
for (let i = 0; i < urlPaths.length; i++) {
|
|
const testSlug = urlPaths[i]
|
|
|
|
for (const mode of modePaths) {
|
|
const res = await next.fetch(`/${mode}/${testSlug}`, {
|
|
redirect: 'manual',
|
|
})
|
|
|
|
expect(res.status).toBe(200)
|
|
|
|
const $ = await next.render$(`/${mode}/${testSlug}`)
|
|
|
|
expect(JSON.parse($('#props').text()).params).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
const router = JSON.parse($('#router').text())
|
|
|
|
expect(router.pathname).toBe(`/${mode}/[slug]`)
|
|
expect(router.asPath).toBe(`/${mode}/${testSlug}`)
|
|
expect(router.query).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
it('should respond with the prerendered data correctly', async () => {
|
|
const buildId = isNextDev ? 'development' : next.buildId
|
|
|
|
for (const path of urlPaths) {
|
|
for (const mode of modePaths) {
|
|
const res = await next.fetch(
|
|
`/_next/data/${buildId}/${mode}/${path}.json`,
|
|
{ redirect: 'manual' }
|
|
)
|
|
expect(res.status).toBe(200)
|
|
|
|
const { pageProps: props } = await res.json()
|
|
|
|
expect(props.params).toEqual({
|
|
slug: decodeURIComponent(path),
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
it('should render correctly in the browser for prerender paths', async () => {
|
|
for (let i = 0; i < urlPaths.length; i++) {
|
|
const testSlug = urlPaths[i]
|
|
|
|
for (const mode of modePaths) {
|
|
const browser = await next.browser(`/${mode}/${testSlug}`)
|
|
|
|
expect(
|
|
JSON.parse(await browser.elementByCss('#props').text()).params
|
|
).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
|
|
const browserRouter = JSON.parse(
|
|
await browser.elementByCss('#router').text()
|
|
)
|
|
|
|
expect(browserRouter.pathname).toBe(`/${mode}/[slug]`)
|
|
expect(browserRouter.asPath).toBe(`/${mode}/${testSlug}`)
|
|
expect(browserRouter.query).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
it('should navigate client-side correctly with interpolating', async () => {
|
|
for (const mode of modePaths) {
|
|
const testSlug = urlPaths[0]
|
|
const browser = await next.browser(`/${mode}/${testSlug}`)
|
|
|
|
expect(
|
|
JSON.parse(await browser.elementByCss('#props').text()).params
|
|
).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
|
|
const browserRouter = JSON.parse(
|
|
await browser.elementByCss('#router').text()
|
|
)
|
|
|
|
expect(browserRouter.pathname).toBe(`/${mode}/[slug]`)
|
|
expect(browserRouter.asPath).toBe(`/${mode}/${testSlug}`)
|
|
expect(browserRouter.query).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
|
|
await browser.eval('window.beforeNav = 1')
|
|
|
|
for (const nextSlug of urlPaths) {
|
|
if (nextSlug === testSlug) continue
|
|
|
|
await browser.eval(`(function() {
|
|
window.next.router.push({
|
|
pathname: '/${mode}/[slug]',
|
|
query: { slug: '${decodeURIComponent(nextSlug)}' }
|
|
})
|
|
})()`)
|
|
|
|
await retry(async () => {
|
|
const routerData = JSON.parse(
|
|
await browser.elementByCss('#router').text()
|
|
)
|
|
expect(routerData.asPath).toBe(`/${mode}/${nextSlug}`)
|
|
})
|
|
|
|
expect(await browser.eval('window.beforeNav')).toBe(1)
|
|
}
|
|
}
|
|
})
|
|
|
|
it('should navigate client-side correctly with string href', async () => {
|
|
for (const mode of modePaths) {
|
|
const testSlug = urlPaths[0]
|
|
const browser = await next.browser(`/${mode}/${testSlug}`)
|
|
|
|
expect(
|
|
JSON.parse(await browser.elementByCss('#props').text()).params
|
|
).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
|
|
const browserRouter = JSON.parse(
|
|
await browser.elementByCss('#router').text()
|
|
)
|
|
|
|
expect(browserRouter.pathname).toBe(`/${mode}/[slug]`)
|
|
expect(browserRouter.asPath).toBe(`/${mode}/${testSlug}`)
|
|
expect(browserRouter.query).toEqual({
|
|
slug: decodeURIComponent(testSlug),
|
|
})
|
|
|
|
await browser.eval('window.beforeNav = 1')
|
|
|
|
for (const nextSlug of urlPaths) {
|
|
if (nextSlug === testSlug) continue
|
|
|
|
await browser.eval(`(function() {
|
|
window.next.router.push('/${mode}/${nextSlug}')
|
|
})()`)
|
|
|
|
await retry(async () => {
|
|
const routerData = JSON.parse(
|
|
await browser.elementByCss('#router').text()
|
|
)
|
|
expect(routerData.asPath).toBe(`/${mode}/${nextSlug}`)
|
|
})
|
|
|
|
expect(await browser.eval('window.beforeNav')).toBe(1)
|
|
}
|
|
}
|
|
})
|
|
})
|