Files
Will Binns-SmithandGitHub 8b7b6fea86 Turbopack tests: remove assertions that duplicate webpack results (#95688)
We forked test assertions in places in the early days of merging
Turbopack. Now that we more closely align, a bunch of these had the
exact same assertions. Fold them into one.
2026-07-10 12:11:26 -07:00

637 lines
23 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { isReact18, nextTestSetup } from 'e2e-utils'
import {
waitForRedbox,
waitForNoRedbox,
getRedboxDescription,
getRedboxSource,
} from 'next-test-utils'
const isRspack = process.env.NEXT_RSPACK !== undefined
describe('react-dom/server in React Server environment', () => {
const dependencies = (global as any).isNextDeploy
? // `link` is incompatible with the npm version used when this test is deployed
{
'internal-pkg': 'file:./internal-pkg',
}
: {
'internal-pkg': 'link:./internal-pkg',
}
const { next, isTurbopack } = nextTestSetup({
files: __dirname,
dependencies,
skipStart: true,
})
let isStarted = false
beforeEach(async () => {
// FIXME: next-custom-transforms RSC errors are not cleared during dev server livetime so we have to restart
if (isStarted) {
await next.stop()
}
await next.start()
isStarted = true
})
it('explicit react-dom/server.browser usage in app code', async () => {
const browser = await next.browser(
'/exports/app-code/react-dom-server-browser-explicit'
)
await waitForNoRedbox(browser)
expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(`
"{
"default": [
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
],
"named": [
"default",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
]
}"
`)
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
expect(redbox).toMatchInlineSnapshot(`
{
"description": null,
"source": null,
}
`)
})
it('explicit react-dom/server.edge usage in app code', async () => {
const browser = await next.browser(
'/exports/app-code/react-dom-server-edge-explicit'
)
await waitForNoRedbox(browser)
if (isTurbopack) {
expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(`
"{
"default": [
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
],
"named": [
"default",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
]
}"
`)
} else {
expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(`
"{
"default": [
"renderToPipeableStream",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"resumeToPipeableStream",
"version"
],
"named": [
"default",
"renderToPipeableStream",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"resumeToPipeableStream",
"version"
]
}"
`)
}
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
expect(redbox).toMatchInlineSnapshot(`
{
"description": null,
"source": null,
}
`)
})
it('implicit react-dom/server.edge usage in app code', async () => {
const browser = await next.browser(
'/exports/app-code/react-dom-server-edge-implicit'
)
if (isTurbopack) {
await expect(browser).toDisplayRedbox(`
{
"description": "You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.",
"environmentLabel": null,
"label": "Build Error",
"source": "./app/exports/app-code/react-dom-server-edge-implicit/page.js (3:1)
Error: You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
Learn more: https://nextjs.org/docs/app/building-your-application/rendering
> 3 | import ReactDOMServerEdgeDefault from 'react-dom/server'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
"stack": [],
}
`)
} else if (isRspack) {
await expect(browser).toDisplayRedbox(`
{
"description": " ╰─▶ × Error: x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.",
"environmentLabel": null,
"label": "Build Error",
"source": "<FIXME-nextjs-internal-source>
╰─▶ × Error: x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
│ | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
│ ,-[1:1]
│ 1 | import * as ReactDOMServerEdge from 'react-dom/server'
│ : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│ 2 | // Fine to drop once React is on ESM
│ 3 | import ReactDOMServerEdgeDefault from 'react-dom/server'
│ \`----
│ x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
│ | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
│ ,-[3:1]
│ 1 | import * as ReactDOMServerEdge from 'react-dom/server'
│ 2 | // Fine to drop once React is on ESM
│ 3 | import ReactDOMServerEdgeDefault from 'react-dom/server'
│ : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│ 4 |
│ 5 | export const runtime = 'edge'
│ \`----
│",
"stack": [],
}
`)
} else {
// FIXME: the source map of source file path is not correct
// Expected: `./app/exports/app-code/react-dom-server-edge-implicit/page.js`
// Observed: `./node_modules/.pnpm/next@file+..+next-repo.../page.js?__next_edge_ssr_entry__
await expect(browser).toDisplayRedbox(`
{
"description": " x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.",
"environmentLabel": null,
"label": "Build Error",
"source": "<FIXME-nextjs-internal-source>
Error: x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
| Learn more: https://nextjs.org/docs/app/building-your-application/rendering
,-[1:1]
1 | import * as ReactDOMServerEdge from 'react-dom/server'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server'
\`----
x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
| Learn more: https://nextjs.org/docs/app/building-your-application/rendering
,-[3:1]
1 | import * as ReactDOMServerEdge from 'react-dom/server'
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | export const runtime = 'edge'
\`----",
"stack": [],
}
`)
}
})
it('explicit react-dom/server.node usage in app code', async () => {
const browser = await next.browser(
'/exports/app-code/react-dom-server-node-explicit'
)
await waitForRedbox(browser)
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
if (isTurbopack) {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": "app/exports/app-code/react-dom-server-node-explicit/page.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerNode from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerNodeDefault from 'react-dom/server.node'
4 |",
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": "app/exports/app-code/react-dom-server-node-explicit/page.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerNode from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerNodeDefault from 'react-dom/server.node'
4 |",
}
`)
}
} else {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
}
}
})
it('implicit react-dom/server.node usage in app code', async () => {
const browser = await next.browser(
'/exports/app-code/react-dom-server-node-implicit'
)
await waitForRedbox(browser)
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
if (isTurbopack) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.",
"source": "./app/exports/app-code/react-dom-server-node-implicit/page.js (3:1)
Error: You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
Learn more: https://nextjs.org/docs/app/building-your-application/rendering
1 | import * as ReactDOMServerNode from 'react-dom/server'
2 | // Fine to drop once React is on ESM
> 3 | import ReactDOMServerNodeDefault from 'react-dom/server'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | export const runtime = 'nodejs'
6 |
Ecmascript file had an error",
}
`)
} else if (isRspack) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": " ╰─▶ × Error: x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.",
"source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
╰─▶ × Error: x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
│ | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
│ ,-[1:1]
│ 1 | import * as ReactDOMServerNode from 'react-dom/server'
│ : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│ 2 | // Fine to drop once React is on ESM
│ 3 | import ReactDOMServerNodeDefault from 'react-dom/server'
│ \`----
│ x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
│ | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
│ ,-[3:1]
│ 1 | import * as ReactDOMServerNode from 'react-dom/server'
│ 2 | // Fine to drop once React is on ESM
│ 3 | import ReactDOMServerNodeDefault from 'react-dom/server'
│ : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
│ 4 |
│ 5 | export const runtime = 'nodejs'
│ \`----
│",
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": " x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.",
"source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
Error: x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
| Learn more: https://nextjs.org/docs/app/building-your-application/rendering
,-[1:1]
1 | import * as ReactDOMServerNode from 'react-dom/server'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerNodeDefault from 'react-dom/server'
\`----
x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
| Learn more: https://nextjs.org/docs/app/building-your-application/rendering
,-[3:1]
1 | import * as ReactDOMServerNode from 'react-dom/server'
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerNodeDefault from 'react-dom/server'
: ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4 |
5 | export const runtime = 'nodejs'
\`----",
}
`)
}
})
it('explicit react-dom/server.browser usage in library code', async () => {
const browser = await next.browser(
'/exports/library-code/react-dom-server-browser-explicit'
)
await waitForRedbox(browser)
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
if (isTurbopack) {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": "internal-pkg/server.node.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server.node'
4 |",
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": "internal-pkg/server.node.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server.node'
4 |",
}
`)
}
} else {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
}
}
})
it('explicit react-dom/server.edge usage in library code', async () => {
const browser = await next.browser(
'/exports/library-code/react-dom-server-edge-explicit'
)
await waitForNoRedbox(browser)
if (isTurbopack) {
expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(`
"{
"default": {
"default": [
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
],
"named": [
"default",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
]
}
}"
`)
} else {
expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(`
"{
"default": {
"default": [
"renderToPipeableStream",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"resumeToPipeableStream",
"version"
],
"named": [
"default",
"renderToPipeableStream",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"resumeToPipeableStream",
"version"
]
}
}"
`)
}
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
expect(redbox).toMatchInlineSnapshot(`
{
"description": null,
"source": null,
}
`)
})
it('implicit react-dom/server.edge usage in library code', async () => {
const browser = await next.browser(
'/exports/library-code/react-dom-server-edge-implicit'
)
await waitForNoRedbox(browser)
expect(await browser.elementByCss('main').text()).toMatchInlineSnapshot(`
"{
"default": {
"default": [
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
],
"named": [
"default",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"resume",
"version"
]
}
}"
`)
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
expect(redbox).toMatchInlineSnapshot(`
{
"description": null,
"source": null,
}
`)
})
it('explicit react-dom/server.node usage in library code', async () => {
const browser = await next.browser(
'/exports/library-code/react-dom-server-node-explicit'
)
await waitForRedbox(browser)
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
if (isTurbopack) {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": "internal-pkg/server.node.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server.node'
4 |",
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": "internal-pkg/server.node.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server.node'
4 |",
}
`)
}
} else {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
}
}
})
it('implicit react-dom/server.node usage in library code', async () => {
const browser = await next.browser(
'/exports/library-code/react-dom-server-node-implicit'
)
await waitForRedbox(browser)
const redbox = {
description: await getRedboxDescription(browser),
source: await getRedboxSource(browser),
}
if (isTurbopack) {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": "internal-pkg/server.node.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server.node'
4 |",
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": "internal-pkg/server.node.js (1:1) @ module evaluation
> 1 | import * as ReactDOMServerEdge from 'react-dom/server.node'
| ^
2 | // Fine to drop once React is on ESM
3 | import ReactDOMServerEdgeDefault from 'react-dom/server.node'
4 |",
}
`)
}
} else {
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
}
}
})
})