Files
next.js/test/e2e/next-link-errors/next-link-errors.test.ts
ad3296b9d4 Update default error pages (#90469)
Redesign the https://github.com/vercel/next.js/pull/87988 error pages to
be more aligned with Next.js aesthetic, along with copy to be sharper.

| Client | Server |
|--------|--------|
| <img width="4992" height="2830" alt="CleanShot 2026-03-03 at 17 26
07@2x"
src="https://github.com/user-attachments/assets/f42bee3e-2ce8-44dc-9e26-79b81cf965d8"
/> | <img width="4992" height="2830" alt="CleanShot 2026-03-03 at 17 23
38@2x"
src="https://github.com/user-attachments/assets/19a596c6-6da7-4a42-9b53-16e3c2e6f867"
/> |
| <img width="4992" height="2830" alt="CleanShot 2026-03-03 at 17 25
22@2x"
src="https://github.com/user-attachments/assets/a3075d79-c76a-4fbf-af6e-d4a44f1434eb"
/> | <img width="4992" height="2830" alt="CleanShot 2026-03-03 at 17 24
17@2x"
src="https://github.com/user-attachments/assets/5811cc98-f8e4-4451-bf9c-501548292245"
/> |

---------

Co-authored-by: Jimmy Lai <[email protected]>
Co-authored-by: Tim Neutkens <[email protected]>
2026-03-04 12:49:57 +01:00

68 lines
2.2 KiB
TypeScript

import { nextTestSetup } from 'e2e-utils'
import webdriver from 'next-webdriver'
describe('next-link', () => {
const { skipped, next, isNextDev } = nextTestSetup({
files: __dirname,
skipDeployment: true,
})
if (skipped) return
it('errors on invalid href', async () => {
const browser = await webdriver(next.appPort, '/invalid-href')
if (isNextDev) {
await expect(browser).toDisplayRedbox(`
{
"code": "E319",
"description": "Failed prop type: The prop \`href\` expects a \`string\` or \`object\` in \`<Link>\`, but got \`undefined\` instead.
Open your browser's console to view the Component stack trace.",
"environmentLabel": null,
"label": "Runtime Error",
"source": "app/invalid-href/page.js (6:10) @ Hello
> 6 | return <Link>Hello, Dave!</Link>
| ^",
"stack": [
"Hello app/invalid-href/page.js (6:10)",
],
}
`)
}
// Client errors show "This page couldn\u2019t load"
expect(await browser.elementByCss('body').text()).toContain(
'This page couldn\u2019t load'
)
})
it('invalid `prefetch` causes runtime error (dev-only)', async () => {
const browser = await webdriver(next.appPort, '/invalid-prefetch')
if (isNextDev) {
await expect(browser).toDisplayRedbox(`
{
"code": "E319",
"description": "Failed prop type: The prop \`prefetch\` expects a \`boolean | "auto"\` in \`<Link>\`, but got \`string\` instead.
Open your browser's console to view the Component stack trace.",
"environmentLabel": null,
"label": "Runtime Error",
"source": "app/invalid-prefetch/page.js (7:5) @ Hello
> 7 | <Link prefetch="unknown" href="https://nextjs.org/">
| ^",
"stack": [
"Hello app/invalid-prefetch/page.js (7:5)",
],
}
`)
// Client errors show "This page couldn\u2019t load"
expect(await browser.elementByCss('body').text()).toContain(
'This page couldn\u2019t load'
)
} else {
expect(await browser.elementByCss('body').text()).toMatchInlineSnapshot(
`"Link with unknown \`prefetch\` renders in prod."`
)
}
})
})