Skip to content

[test] Use new Redbox matchers in app/ ReactRefreshLogBoxMisc #76563

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

Merged
merged 1 commit into from
Feb 27, 2025
Merged

[test] Use new Redbox matchers in app/ ReactRefreshLogBoxMisc #76563

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
242 changes: 43 additions & 199 deletions test/development/acceptance-app/ReactRefreshLogBoxMisc.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,210 +3,15 @@ import { FileRef, nextTestSetup } from 'e2e-utils'
import path from 'path'
import { outdent } from 'outdent'

// TODO: re-enable these tests after figuring out what is causing
// them to be so unreliable in CI
describe.skip('ReactRefreshLogBox app', () => {
const { next } = nextTestSetup({
describe('ReactRefreshLogBox app', () => {
const { isTurbopack, next } = nextTestSetup({
files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
skipStart: true,
})

test('<Link> with multiple children', async () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in

next.js/test/e2e/next-link-errors/next-link-errors.test.ts

Line 64 in aae3692

it('multiple children', async () => {

await using sandbox = await createSandbox(next)
const { session } = sandbox

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Index() {
return (
<Link href="/">
<p>One</p>
<p>Two</p>
</Link>
)
}
`
)

await session.assertHasRedbox()
expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
`"Error: Multiple children were passed to <Link> with \`href\` of \`/\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children"`
)
expect(
await session.evaluate(
() =>
(
document
.querySelector('body > nextjs-portal')
.shadowRoot.querySelector(
'#nextjs__container_errors_desc a:nth-of-type(1)'
) as any
).href
)
).toMatch('https://nextjs.org/docs/messages/link-multiple-children')
})

test('<Link> component props errors', async () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in

next.js/test/e2e/next-link-errors/next-link-errors.test.ts

Line 13 in aae3692

const browser = await webdriver(next.appPort, '/invalid-href')

await using sandbox = await createSandbox(next)
const { session } = sandbox

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Hello() {
return <Link />
}
`
)

await session.assertHasRedbox()
expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
`"Error: Failed prop type: The prop \`href\` expects a \`string\` or \`object\` in \`<Link>\`, but got \`undefined\` instead."`
)

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Hello() {
return <Link href="/">Abc</Link>
}
`
)
await session.assertNoRedbox()

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Hello() {
return (
<Link
href="/"
as="/"
replace={false}
scroll={false}
shallow={false}
passHref={false}
prefetch={false}
>
Abc
</Link>
)
}
`
)
await session.assertNoRedbox()

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Hello() {
return (
<Link
href="/"
as="/"
replace={true}
scroll={true}
shallow={true}
passHref={true}
prefetch={true}
>
Abc
</Link>
)
}
`
)
await session.assertNoRedbox()

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Hello() {
return (
<Link
href="/"
as="/"
replace={undefined}
scroll={undefined}
shallow={undefined}
passHref={undefined}
prefetch={undefined}
>
Abc
</Link>
)
}
`
)
await session.assertNoRedbox()

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Hello() {
return (
<Link
href="/"
as="/"
replace={undefined}
scroll={'oops'}
shallow={undefined}
passHref={undefined}
prefetch={undefined}
>
Abc
</Link>
)
}
`
)
await session.assertHasRedbox()
expect(await session.getRedboxDescription()).toMatchSnapshot()

await session.patch(
'index.js',
outdent`
import Link from 'next/link'

export default function Hello() {
return (
<Link
href={false}
as="/"
replace={undefined}
scroll={'oops'}
shallow={undefined}
passHref={undefined}
prefetch={undefined}
>
Abc
</Link>
)
}
`
)
await session.assertHasRedbox()
expect(await session.getRedboxDescription()).toMatchSnapshot()
})

test('server-side only compilation errors', async () => {
await using sandbox = await createSandbox(next)
const { session } = sandbox
const { browser, session } = sandbox

await session.patch(
'app/page.js',
Expand All @@ -226,6 +31,45 @@ describe.skip('ReactRefreshLogBox app', () => {
`
)

await session.assertHasRedbox()
if (isTurbopack) {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Ecmascript file had an error",
"environmentLabel": null,
"label": "Build Error",
"source": "./app/page.js (3:23)
Ecmascript file had an error
> 3 | export async function getStaticProps() {
| ^^^^^^^^^^^^^^",
"stack": [],
}
`)
} else {
await expect(browser).toDisplayRedbox(`
{
"count": 1,
"description": "Error: x "getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching",
"environmentLabel": null,
"label": "Build Error",
"source": "./app/page.js
Error: x "getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching
|
|
,-[3:1]
1 | 'use client'
2 | import myLibrary from 'my-non-existent-library'
3 | export async function getStaticProps() {
: ^^^^^^^^^^^^^^
4 | return {
5 | props: {
6 | result: myLibrary()
\`----
Import trace for requested module:
./app/page.js",
"stack": [],
}
`)
}
})
})
Loading