mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +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.
146 lines
5.1 KiB
JavaScript
146 lines
5.1 KiB
JavaScript
import React from 'react'
|
|
import testImg from '../public/foo/test-rect.jpg'
|
|
import testImgProp from '../public/exif-rotation.jpg'
|
|
import Image from 'next/image'
|
|
|
|
import testJPG from '../public/test.jpg'
|
|
import testPNG from '../public/test.png'
|
|
import testWEBP from '../public/test.webp'
|
|
import testAVIF from '../public/test.avif'
|
|
import testSVG from '../public/test.svg'
|
|
import testGIF from '../public/test.gif'
|
|
import testBMP from '../public/test.bmp'
|
|
import testICO from '../public/test.ico'
|
|
import widePNG from '../public/wide.png'
|
|
import tallPNG from '../components/tall.png'
|
|
import superWidePNG from '../public/super-wide.png'
|
|
|
|
import TallImage from '../components/TallImage'
|
|
|
|
const blurDataURL =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNM/s/wBwAFjwJgf8HDLgAAAABJRU5ErkJggg=='
|
|
const shimmer = `data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMzMzIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzIyMiIgb2Zmc2V0PSI1MCUiIC8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiMzMzMiIC8+CiAgPHJlY3QgaWQ9InIiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSJ1cmwoI2cpIiAvPgogIDxhbmltYXRlIHhsaW5rOmhyZWY9IiNyIiBhdHRyaWJ1dGVOYW1lPSJ4IiBmcm9tPSItMjAwIiB0bz0iMjAwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+Cjwvc3ZnPg==`
|
|
|
|
export const getStaticProps = () => ({
|
|
props: { testImgProp },
|
|
})
|
|
|
|
function FillContainer({ children }) {
|
|
// Optimized to accept the square test images. Subtracting 16px to account for
|
|
// the default 8px body margin.
|
|
return (
|
|
<div style={{ position: 'relative', height: 'calc(100vw - 16px)' }}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Page = ({ testImgProp }) => {
|
|
return (
|
|
<div>
|
|
<h1 id="page-header">Static Image</h1>
|
|
<Image id="basic-static" src={testImg} placeholder="blur" priority />
|
|
<Image id="basic-staticprop" src={testImgProp} placeholder="blur" />
|
|
<TallImage />
|
|
<Image
|
|
id="defined-width-and-height"
|
|
src={testPNG}
|
|
height="150"
|
|
width="150"
|
|
/>
|
|
<Image id="defined-height-only" src={widePNG} height="350" />
|
|
<Image id="defined-width-only" src={widePNG} width="400" />
|
|
<Image id="require-static" src={require('../public/foo/test-rect.jpg')} />
|
|
<Image
|
|
id="basic-non-static"
|
|
src="/test-rect.jpg"
|
|
width="400"
|
|
height="300"
|
|
/>
|
|
<br />
|
|
<Image id="blur-png" src={testPNG} placeholder="blur" />
|
|
<Image id="blur-jpg" src={testJPG} placeholder="blur" />
|
|
<Image id="blur-webp" src={testWEBP} placeholder="blur" />
|
|
<Image id="blur-avif" src={testAVIF} placeholder="blur" />
|
|
<Image id="blur-wide" src={widePNG} placeholder="blur" />
|
|
<Image id="blur-tall" src={tallPNG} placeholder="blur" />
|
|
<Image
|
|
id="blur-super-wide"
|
|
src={superWidePNG}
|
|
placeholder="blur"
|
|
width={72}
|
|
height={16}
|
|
/>
|
|
<Image
|
|
id="blur-super-tall"
|
|
src={superWidePNG}
|
|
placeholder="blur"
|
|
width={16}
|
|
height={72}
|
|
/>
|
|
<br />
|
|
<Image id="static-svg" src={testSVG} />
|
|
<Image id="static-gif" src={testGIF} />
|
|
<Image id="static-bmp" src={testBMP} />
|
|
<Image id="static-ico" src={testICO} />
|
|
<br />
|
|
<FillContainer>
|
|
<Image id="static-svg-fill" src={testSVG} fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="static-gif-fill" src={testGIF} fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="static-bmp-fill" src={testBMP} fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="static-ico-fill" src={testICO} fill />
|
|
</FillContainer>
|
|
<br />
|
|
<FillContainer>
|
|
<Image id="blur-png-fill" src={testPNG} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="blur-jpg-fill" src={testJPG} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="blur-webp-fill" src={testWEBP} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="blur-avif-fill" src={testAVIF} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<br />
|
|
<FillContainer>
|
|
<Image
|
|
id="blurdataurl-fill"
|
|
src="/test.jpg"
|
|
placeholder="blur"
|
|
blurDataURL={blurDataURL}
|
|
fill
|
|
/>
|
|
</FillContainer>
|
|
<Image
|
|
id="blurdataurl-ratio"
|
|
src="/test.png"
|
|
placeholder="blur"
|
|
blurDataURL={blurDataURL}
|
|
width="100"
|
|
height="200"
|
|
/>
|
|
<br />
|
|
<Image id="static-unoptimized" src={testJPG} unoptimized />
|
|
<br />
|
|
<Image
|
|
id="data-url-placeholder"
|
|
src={testImg}
|
|
placeholder={shimmer}
|
|
width="200"
|
|
height="200"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page
|