Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[test] Use new Redbox matchers in pages/ client-navigation/rendering #76798

Merged
merged 1 commit into from
Mar 9, 2025
+143 −39
Merged

[test] Use new Redbox matchers in pages/ client-navigation/rendering #76798

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 143 additions & 39 deletions test/development/pages-dir/client-navigation/rendering.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,7 @@

import cheerio from 'cheerio'
import { nextTestSetup } from 'e2e-utils'
import {
assertHasRedbox,
fetchViaHTTP,
getRedboxHeader,
renderViaHTTP,
} from 'next-test-utils'
import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
import webdriver from 'next-webdriver'
import { BUILD_MANIFEST, REACT_LOADABLE_MANIFEST } from 'next/constants'
import path from 'path'
Expand All @@ -16,7 +11,7 @@ import url from 'url'
const isReact18 = parseInt(process.env.NEXT_TEST_REACT_VERSION) === 18

describe('Client Navigation rendering', () => {
const { next } = nextTestSetup({
const { isTurbopack, next } = nextTestSetup({
files: path.join(__dirname, 'fixture'),
env: {
TEST_STRICT_NEXT_HEAD: String(true),
Expand Down Expand Up @@ -132,12 +127,32 @@ describe('Client Navigation rendering', () => {

test('getInitialProps circular structure', async () => {
const browser = await webdriver(next.appPort, '/circular-json-error')
const expectedErrorMessage =
'Circular structure in "getInitialProps" result of page "/circular-json-error".'

await assertHasRedbox(browser)
const text = await getRedboxHeader(browser)
expect(text).toContain(expectedErrorMessage)
if (isReact18 && isTurbopack) {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: Circular structure in "getInitialProps" result of page "/circular-json-error". https://nextjs.org/docs/messages/circular-structure",
"environmentLabel": null,
"label": "Runtime Error",
"source": null,
"stack": [
"new Promise <anonymous> (0:0)",
],
}
`)
} else {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: Circular structure in "getInitialProps" result of page "/circular-json-error". https://nextjs.org/docs/messages/circular-structure",
"environmentLabel": null,
"label": "Runtime Error",
"source": null,
"stack": [],
}
`)
}
})

test('getInitialProps should be class method', async () => {
Expand All @@ -146,22 +161,31 @@ describe('Client Navigation rendering', () => {
'/instance-get-initial-props'
)

const expectedErrorMessage =
'"InstanceInitialPropsPage.getInitialProps()" is defined as an instance method - visit https://nextjs.org/docs/messages/get-initial-props-as-an-instance-method for more information.'

await assertHasRedbox(browser)
const text = await getRedboxHeader(browser)
expect(text).toContain(expectedErrorMessage)
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: "InstanceInitialPropsPage.getInitialProps()" is defined as an instance method - visit https://nextjs.org/docs/messages/get-initial-props-as-an-instance-method for more information.",
"environmentLabel": null,
"label": "Runtime Error",
"source": null,
"stack": [],
}
`)
})

test('getInitialProps resolves to null', async () => {
const browser = await webdriver(next.appPort, '/empty-get-initial-props')
const expectedErrorMessage =
'"EmptyInitialPropsPage.getInitialProps()" should resolve to an object. But found "null" instead.'

await assertHasRedbox(browser)
const text = await getRedboxHeader(browser)
expect(text).toContain(expectedErrorMessage)
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: "EmptyInitialPropsPage.getInitialProps()" should resolve to an object. But found "null" instead.",
"environmentLabel": null,
"label": "Runtime Error",
"source": null,
"stack": [],
}
`)
})

test('default Content-Type', async () => {
Expand Down Expand Up @@ -195,28 +219,103 @@ describe('Client Navigation rendering', () => {

test('default export is not a React Component', async () => {
const browser = await webdriver(next.appPort, '/no-default-export')
await assertHasRedbox(browser)
const text = await getRedboxHeader(browser)
expect(text).toMatch(/The default export is not a React Component/)

await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: The default export is not a React Component in page: "/no-default-export"",
"environmentLabel": null,
"label": "Runtime Error",
"source": null,
"stack": [],
}
`)
})

test('error-inside-page', async () => {
const browser = await webdriver(next.appPort, '/error-inside-page')
await assertHasRedbox(browser)
const text = await getRedboxHeader(browser)
expect(text).toMatch(/This is an expected error/)
// Sourcemaps are applied by react-error-overlay, so we can't check them on SSR.

if (isTurbopack) {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: This is an expected error",
"environmentLabel": null,
"label": "Runtime Error",
"source": "pages/error-inside-page.js (2:9) @
{default export}
> 2 | throw new Error('This is an expected error')
| ^",
"stack": [
"{default export} pages/error-inside-page.js (2:9)",
],
}
`)
} else {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: This is an expected error",
"environmentLabel": null,
"label": "Runtime Error",
"source": "pages/error-inside-page.js (2:9) @ default
> 2 | throw new Error('This is an expected error')
| ^",
"stack": [
"default pages/error-inside-page.js (2:9)",
],
}
`)
}
})

test('error-in-the-global-scope', async () => {
const browser = await webdriver(
next.appPort,
'/error-in-the-global-scope'
)
await assertHasRedbox(browser)
const text = await getRedboxHeader(browser)
expect(text).toMatch(/aa is not defined/)
// Sourcemaps are applied by react-error-overlay, so we can't check them on SSR.

if (isTurbopack) {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "ReferenceError: aa is not defined",
"environmentLabel": null,
"label": "Runtime Error",
"source": "pages/error-in-the-global-scope.js (1:1) @ [project]/pages/error-in-the-global-scope.js [ssr] (ecmascript)
> 1 | aa = 10 //eslint-disable-line
| ^",
"stack": [
"[project]/pages/error-in-the-global-scope.js [ssr] (ecmascript) pages/error-in-the-global-scope.js (1:1)",
"<FIXME-next-dist-dir>",
],
}
`)
} else {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "ReferenceError: aa is not defined",
"environmentLabel": null,
"label": "Runtime Error",
"source": "pages/error-in-the-global-scope.js (1:1) @ eval
> 1 | aa = 10 //eslint-disable-line
| ^",
"stack": [
"eval pages/error-in-the-global-scope.js (1:1)",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
"<FIXME-next-dist-dir>",
],
}
`)
}
})

it('should set Cache-Control header', async () => {
Expand Down Expand Up @@ -320,12 +419,17 @@ describe('Client Navigation rendering', () => {

it('should show a valid error when undefined is thrown', async () => {
const browser = await webdriver(next.appPort, '/throw-undefined')
await assertHasRedbox(browser)
const text = await getRedboxHeader(browser)

expect(text).toContain(
'An undefined error was thrown, see here for more info:'
)
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: An undefined error was thrown, see here for more info: https://nextjs.org/docs/messages/threw-undefined",
"environmentLabel": null,
"label": "Runtime Error",
"source": null,
"stack": [],
}
`)
})
})
})
Expand Down
Loading