{"commit":{"revision":"90172d12e8f06936ade78ed916397c16a2bec4f8","subject":"[Flight] Cleanup turbopack tests (#27552)","authoredAt":"2023-10-20T23:21:31-07:00","shortRevision":"90172d12e8","authorName":"Josh Story","authorEmail":"story@hey.com"},"body":"Renames turbopack flight test files. removes tests which are primarily\r\ntesting internal implemenation behavior of Flight Client itself","files":[{"status":"D","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOM-test.js"},{"status":"D","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOMNode-test.js"},{"status":"D","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOMReply-test.js"},{"status":"A","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightTurbopackDOM-test.js"},{"status":"R100","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightTurbopackDOMBrowser-test.js","previousPath":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOMBrowser-test.js"},{"status":"R052","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightTurbopackDOMEdge-test.js","previousPath":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOMEdge-test.js"},{"status":"R058","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightTurbopackDOMForm-test.js","previousPath":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOMForm-test.js"},{"status":"A","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightTurbopackDOMNode-test.js"},{"status":"A","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightTurbopackDOMReply-test.js"},{"status":"R100","path":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightTurbopackDOMReplyEdge-test.js","previousPath":"packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOMReplyEdge-test.js"}],"patch":"diff --git a\/packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOM-test.js b\/packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOM-test.js\ndeleted file mode 100644\nindex 0a3773fa6f..0000000000\n--- a\/packages\/react-server-dom-turbopack\/src\/__tests__\/ReactFlightDOM-test.js\n+++ \/dev\/null\n@@ -1,1572 +0,0 @@\n-\/**\n- * Copyright (c) Meta Platforms, Inc. and affiliates.\n- *\n- * This source code is licensed under the MIT license found in the\n- * LICENSE file in the root directory of this source tree.\n- *\n- * @emails react-core\n- *\/\n-\n-'use strict';\n-\n-\/\/ Polyfills for test environment\n-global.ReadableStream =\n- require('web-streams-polyfill\/ponyfill\/es6').ReadableStream;\n-global.TextEncoder = require('util').TextEncoder;\n-global.TextDecoder = require('util').TextDecoder;\n-\n-\/\/ Don't wait before processing work on the server.\n-\/\/ TODO: we can replace this with FlightServer.act().\n-global.setImmediate = cb => cb();\n-\n-let act;\n-let use;\n-let clientExports;\n-let clientModuleError;\n-let turbopackMap;\n-let Stream;\n-let FlightReact;\n-let React;\n-let FlightReactDOM;\n-let ReactDOMClient;\n-let ReactServerDOMServer;\n-let ReactServerDOMClient;\n-let ReactDOMFizzServer;\n-let Suspense;\n-let ErrorBoundary;\n-let JSDOM;\n-\n-describe('ReactFlightDOM', () => {\n- beforeEach(() => {\n- \/\/ For this first reset we are going to load the dom-node version of react-server-dom-turbopack\/server\n- \/\/ This can be thought of as essentially being the React Server Components scope with react-server\n- \/\/ condition\n- jest.resetModules();\n-\n- JSDOM = require('jsdom').JSDOM;\n-\n- \/\/ Simulate the condition resolution\n- jest.mock('react-server-dom-turbopack\/server', () =>\n- require('react-server-dom-turbopack\/server.node.unbundled'),\n- );\n- jest.mock('react', () => require('react\/react.shared-subset'));\n-\n- const TurbopackMock = require('.\/utils\/TurbopackMock');\n- clientExports = TurbopackMock.clientExports;\n- clientModuleError = TurbopackMock.clientModuleError;\n- turbopackMap = TurbopackMock.turbopackMap;\n-\n- ReactServerDOMServer = require('react-server-dom-turbopack\/server');\n- FlightReact = require('react');\n- FlightReactDOM = require('react-dom');\n-\n- \/\/ This reset is to load modules for the SSR\/Browser scope.\n- jest.resetModules();\n- __unmockReact();\n- act = require('internal-test-utils').act;\n- Stream = require('stream');\n- React = require('react');\n- use = React.use;\n- Suspense = React.Suspense;\n- ReactDOMClient = require('react-dom\/client');\n- ReactDOMFizzServer = require('react-dom\/server.node');\n- ReactServerDOMClient = require('react-server-dom-turbopack\/client');\n-\n- ErrorBoundary = class extends React.Component {\n- state = {hasError: false, error: null};\n- static getDerivedStateFromError(error) {\n- return {\n- hasError: true,\n- error,\n- };\n- }\n- render() {\n- if (this.state.hasError) {\n- return this.props.fallback(this.state.error);\n- }\n- return this.props.children;\n- }\n- };\n- });\n-\n- function getTestStream() {\n- const writable = new Stream.PassThrough();\n- const readable = new ReadableStream({\n- start(controller) {\n- writable.on('data', chunk => {\n- controller.enqueue(chunk);\n- });\n- writable.on('end', () => {\n- controller.close();\n- });\n- },\n- });\n- return {\n- readable,\n- writable,\n- };\n- }\n-\n- const theInfinitePromise = new Promise(() => {});\n- function InfiniteSuspend() {\n- throw theInfinitePromise;\n- }\n-\n- function getMeaningfulChildren(element) {\n- const children = [];\n- let node = element.firstChild;\n- while (node) {\n- if (node.nodeType === 1) {\n- if (\n- \/\/ some tags are ambiguous and might be hidden because they look like non-meaningful children\n- \/\/ so we have a global override where if this data attribute is included we also include the node\n- node.hasAttribute('data-meaningful') ||\n- (node.tagName === 'SCRIPT' &&\n- node.hasAttribute('src') &&\n- node.hasAttribute('async')) ||\n- (node.tagName !== 'SCRIPT' &&\n- node.tagName !== 'TEMPLATE' &&\n- node.tagName !== 'template' &&\n- !node.hasAttribute('hidden') &&\n- !node.hasAttribute('aria-hidden'))\n- ) {\n- const props = {};\n- const attributes = node.attributes;\n- for (let i = 0; i < attributes.length; i++) {\n- if (\n- attributes[i].name === 'id' &&\n- attributes[i].value.includes(':')\n- ) {\n- \/\/ We assume this is a React added ID that's a non-visual implementation detail.\n- continue;\n- }\n- props[attributes[i].name] = attributes[i].value;\n- }\n- props.children = getMeaningfulChildren(node);\n- children.push(React.createElement(node.tagName.toLowerCase(), props));\n- }\n- } else if (node.nodeType === 3) {\n- children.push(node.data);\n- }\n- node = node.nextSibling;\n- }\n- return children.length === 0\n- ? undefined\n- : children.length === 1\n- ? children[0]\n- : children;\n- }\n-\n- it('should resolve HTML using Node streams', async () => {\n- function Text({children}) {\n- return {children}<\/span>;\n- }\n- function HTML() {\n- return (\n-

\n- hello<\/Text>\n- world<\/Text>\n- <\/div>\n- );\n- }\n-\n- function App() {\n- const model = {\n- html: ,\n- };\n- return model;\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n- const model = await response;\n- expect(model).toEqual({\n- html: (\n-

\n- hello<\/span>\n- world<\/span>\n- <\/div>\n- ),\n- });\n- });\n-\n- it('should resolve the root', async () => {\n- \/\/ Model\n- function Text({children}) {\n- return {children}<\/span>;\n- }\n- function HTML() {\n- return (\n-

\n- hello<\/Text>\n- world<\/Text>\n- <\/div>\n- );\n- }\n- function RootModel() {\n- return {\n- html: ,\n- };\n- }\n-\n- \/\/ View\n- function Message({response}) {\n- return

{use(response).html}<\/section>;\n- }\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe(\n- '

hello<\/span>world<\/span><\/div><\/section>',\n- );\n- });\n-\n- it('should not get confused by $', async () => {\n- \/\/ Model\n- function RootModel() {\n- return {text: '$1'};\n- }\n-\n- \/\/ View\n- function Message({response}) {\n- return

{use(response).text}<\/p>;\n- }\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

$1<\/p>');\n- });\n-\n- it('should not get confused by @', async () => {\n- \/\/ Model\n- function RootModel() {\n- return {text: '@div'};\n- }\n-\n- \/\/ View\n- function Message({response}) {\n- return

@div<\/p>');\n- });\n-\n- it('should be able to esm compat test module references', async () => {\n- const ESMCompatModule = {\n- __esModule: true,\n- default: function ({greeting}) {\n- return greeting + ' World';\n- },\n- hi: 'Hello',\n- };\n-\n- function Print({response}) {\n- return

{use(response)}<\/p>;\n- }\n-\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- function interopWebpack(obj) {\n- \/\/ Basically what Webpack's ESM interop feature testing does.\n- if (typeof obj === 'object' && obj.__esModule) {\n- return obj;\n- }\n- return Object.assign({default: obj}, obj);\n- }\n-\n- const {default: Component, hi} = interopWebpack(\n- clientExports(ESMCompatModule),\n- );\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

Hello World<\/p>');\n- });\n-\n- it('should be able to render a named component export', async () => {\n- const Module = {\n- Component: function ({greeting}) {\n- return greeting + ' World';\n- },\n- };\n-\n- function Print({response}) {\n- return

{use(response)}<\/p>;\n- }\n-\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const {Component} = clientExports(Module);\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

Hello World<\/p>');\n- });\n-\n- it('should be able to render a module split named component export', async () => {\n- const Module = {\n- \/\/ This gets split into a separate module from the original one.\n- split: function ({greeting}) {\n- return greeting + ' World';\n- },\n- };\n-\n- function Print({response}) {\n- return

{use(response)}<\/p>;\n- }\n-\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const {split: Component} = clientExports(Module);\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

Hello World<\/p>');\n- });\n-\n- it('should unwrap async module references', async () => {\n- const AsyncModule = Promise.resolve(function AsyncModule({text}) {\n- return 'Async: ' + text;\n- });\n-\n- const AsyncModule2 = Promise.resolve({\n- exportName: 'Module',\n- });\n-\n- function Print({response}) {\n- return

{use(response)}<\/p>;\n- }\n-\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const AsyncModuleRef = await clientExports(AsyncModule);\n- const AsyncModuleRef2 = await clientExports(AsyncModule2);\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

Async: Module<\/p>');\n- });\n-\n- it('should unwrap async module references using use', async () => {\n- const AsyncModule = Promise.resolve('Async Text');\n-\n- function Print({response}) {\n- return use(response);\n- }\n-\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const AsyncModuleRef = clientExports(AsyncModule);\n-\n- function ServerComponent() {\n- const text = FlightReact.use(AsyncModuleRef);\n- return

{text}<\/p>;\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

Async Text<\/p>');\n- });\n-\n- it('should be able to import a name called \"then\"', async () => {\n- const thenExports = {\n- then: function then() {\n- return 'and then';\n- },\n- };\n-\n- function Print({response}) {\n- return

{use(response)}<\/p>;\n- }\n-\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const ThenRef = clientExports(thenExports).then;\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

and then<\/p>');\n- });\n-\n- it('throws when accessing a member below the client exports', () => {\n- const ClientModule = clientExports({\n- Component: {deep: 'thing'},\n- });\n- function dotting() {\n- return ClientModule.Component.deep;\n- }\n- expect(dotting).toThrowError(\n- 'Cannot access Component.deep on the server. ' +\n- 'You cannot dot into a client module from a server component. ' +\n- 'You can only pass the imported name through.',\n- );\n- });\n-\n- it('does not throw when React inspects any deep props', () => {\n- const ClientModule = clientExports({\n- Component: function () {},\n- });\n- ;\n- });\n-\n- it('throws when accessing a Context.Provider below the client exports', () => {\n- const Context = React.createContext();\n- const ClientModule = clientExports({\n- Context,\n- });\n- function dotting() {\n- return ClientModule.Context.Provider;\n- }\n- expect(dotting).toThrowError(\n- `Cannot render a Client Context Provider on the Server. ` +\n- `Instead, you can export a Client Component wrapper ` +\n- `that itself renders a Client Context Provider.`,\n- );\n- });\n-\n- it('should progressively reveal server components', async () => {\n- let reportedErrors = [];\n-\n- \/\/ Client Components\n-\n- function MyErrorBoundary({children}) {\n- return (\n- (\n-

\n- {__DEV__ ? e.message + ' + ' : null}\n- {e.digest}\n- <\/p>\n- )}>\n- {children}\n- <\/ErrorBoundary>\n- );\n- }\n-\n- \/\/ Model\n- function Text({children}) {\n- return children;\n- }\n-\n- function makeDelayedText() {\n- let _resolve, _reject;\n- let promise = new Promise((resolve, reject) => {\n- _resolve = () => {\n- promise = null;\n- resolve();\n- };\n- _reject = e => {\n- promise = null;\n- reject(e);\n- };\n- });\n- async function DelayedText({children}) {\n- await promise;\n- return {children}<\/Text>;\n- }\n- return [DelayedText, _resolve, _reject];\n- }\n-\n- const [Friends, resolveFriends] = makeDelayedText();\n- const [Name, resolveName] = makeDelayedText();\n- const [Posts, resolvePosts] = makeDelayedText();\n- const [Photos, resolvePhotos] = makeDelayedText();\n- const [Games, , rejectGames] = makeDelayedText();\n-\n- \/\/ View\n- function ProfileDetails({avatar}) {\n- return (\n-

\n- :name:<\/Name>\n- {avatar}\n- <\/div>\n- );\n- }\n- function ProfileSidebar({friends}) {\n- return (\n-

\n- :photos:<\/Photos>\n- {friends}\n- <\/div>\n- );\n- }\n- function ProfilePosts({posts}) {\n- return

{posts}<\/div>;\n- }\n- function ProfileGames({games}) {\n- return

{games}<\/div>;\n- }\n-\n- const MyErrorBoundaryClient = clientExports(MyErrorBoundary);\n-\n- function ProfileContent() {\n- return (\n- <>\n- :avatar:<\/Text>} \/>\n- (loading sidebar)<\/p>}>\n- :friends:<\/Friends>} \/>\n- <\/Suspense>\n- (loading posts)<\/p>}>\n- :posts:<\/Posts>} \/>\n- <\/Suspense>\n- \n- (loading games)<\/p>}>\n- :games:<\/Games>} \/>\n- <\/Suspense>\n- <\/MyErrorBoundaryClient>\n- <\/>\n- );\n- }\n-\n- const model = {\n- rootContent: ,\n- };\n-\n- function ProfilePage({response}) {\n- return use(response).rootContent;\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- model,\n- turbopackMap,\n- {\n- onError(x) {\n- reportedErrors.push(x);\n- return __DEV__ ? 'a dev digest' : `digest(\"${x.message}\")`;\n- },\n- },\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render(\n- (loading)<\/p>}>\n- \n- <\/Suspense>,\n- );\n- });\n- expect(container.innerHTML).toBe('

(loading)<\/p>');\n-\n- \/\/ This isn't enough to show anything.\n- await act(() => {\n- resolveFriends();\n- });\n- expect(container.innerHTML).toBe('

(loading)<\/p>');\n-\n- \/\/ We can now show the details. Sidebar and posts are still loading.\n- await act(() => {\n- resolveName();\n- });\n- \/\/ Advance time enough to trigger a nested fallback.\n- await act(() => {\n- jest.advanceTimersByTime(500);\n- });\n- expect(container.innerHTML).toBe(\n- '

:name::avatar:<\/div>' +\n- '

(loading sidebar)<\/p>' +\n- '

(loading posts)<\/p>' +\n- '

(loading games)<\/p>',\n- );\n-\n- expect(reportedErrors).toEqual([]);\n-\n- const theError = new Error('Game over');\n- \/\/ Let's *fail* loading games.\n- await act(async () => {\n- await rejectGames(theError);\n- await 'the inner async function';\n- });\n- const expectedGamesValue = __DEV__\n- ? '

Game over + a dev digest<\/p>'\n- : '

digest(\"Game over\")<\/p>';\n- expect(container.innerHTML).toBe(\n- '

:name::avatar:<\/div>' +\n- '

(loading sidebar)<\/p>' +\n- '

(loading posts)<\/p>' +\n- expectedGamesValue,\n- );\n-\n- expect(reportedErrors).toEqual([theError]);\n- reportedErrors = [];\n-\n- \/\/ We can now show the sidebar.\n- await act(async () => {\n- await resolvePhotos();\n- await 'the inner async function';\n- });\n- expect(container.innerHTML).toBe(\n- '

:name::avatar:<\/div>' +\n- '

:photos::friends:<\/div>' +\n- '

(loading posts)<\/p>' +\n- expectedGamesValue,\n- );\n-\n- \/\/ Show everything.\n- await act(async () => {\n- await resolvePosts();\n- await 'the inner async function';\n- });\n- expect(container.innerHTML).toBe(\n- '

:name::avatar:<\/div>' +\n- '

:photos::friends:<\/div>' +\n- '

:posts:<\/div>' +\n- expectedGamesValue,\n- );\n-\n- expect(reportedErrors).toEqual([]);\n- });\n-\n- it('should preserve state of client components on refetch', async () => {\n- \/\/ Client\n-\n- function Page({response}) {\n- return use(response);\n- }\n-\n- function Input() {\n- return ;\n- }\n-\n- const InputClient = clientExports(Input);\n-\n- \/\/ Server\n-\n- function App({color}) {\n- \/\/ Verify both DOM and Client children.\n- return (\n-

\n- \n- \n- <\/div>\n- );\n- }\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n-\n- const stream1 = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(stream1.writable);\n- const response1 = ReactServerDOMClient.createFromReadableStream(\n- stream1.readable,\n- );\n- await act(() => {\n- root.render(\n- (loading)<\/p>}>\n- \n- <\/Suspense>,\n- );\n- });\n- expect(container.children.length).toBe(1);\n- expect(container.children[0].tagName).toBe('DIV');\n- expect(container.children[0].style.color).toBe('red');\n-\n- \/\/ Change the DOM state for both inputs.\n- const inputA = container.children[0].children[0];\n- expect(inputA.tagName).toBe('INPUT');\n- inputA.value = 'hello';\n- const inputB = container.children[0].children[1];\n- expect(inputB.tagName).toBe('INPUT');\n- inputB.value = 'goodbye';\n-\n- const stream2 = getTestStream();\n- const {pipe: pipe2} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe2(stream2.writable);\n- const response2 = ReactServerDOMClient.createFromReadableStream(\n- stream2.readable,\n- );\n- await act(() => {\n- root.render(\n- (loading)<\/p>}>\n- \n- <\/Suspense>,\n- );\n- });\n- expect(container.children.length).toBe(1);\n- expect(container.children[0].tagName).toBe('DIV');\n- expect(container.children[0].style.color).toBe('blue');\n-\n- \/\/ Verify we didn't destroy the DOM for either input.\n- expect(inputA === container.children[0].children[0]).toBe(true);\n- expect(inputA.tagName).toBe('INPUT');\n- expect(inputA.value).toBe('hello');\n- expect(inputB === container.children[0].children[1]).toBe(true);\n- expect(inputB.tagName).toBe('INPUT');\n- expect(inputB.value).toBe('goodbye');\n- });\n-\n- it('should be able to complete after aborting and throw the reason client-side', async () => {\n- const reportedErrors = [];\n-\n- const {writable, readable} = getTestStream();\n- const {pipe, abort} = ReactServerDOMServer.renderToPipeableStream(\n-

\n- \n- <\/div>,\n- turbopackMap,\n- {\n- onError(x) {\n- reportedErrors.push(x);\n- const message = typeof x === 'string' ? x : x.message;\n- return __DEV__ ? 'a dev digest' : `digest(\"${message}\")`;\n- },\n- },\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n-\n- function App({res}) {\n- return use(res);\n- }\n-\n- await act(() => {\n- root.render(\n- (\n-

\n- {__DEV__ ? e.message + ' + ' : null}\n- {e.digest}\n- <\/p>\n- )}>\n- (loading)<\/p>}>\n- \n- <\/Suspense>\n- <\/ErrorBoundary>,\n- );\n- });\n- expect(container.innerHTML).toBe('

(loading)<\/p>');\n-\n- await act(() => {\n- abort('for reasons');\n- });\n- if (__DEV__) {\n- expect(container.innerHTML).toBe(\n- '

Error: for reasons + a dev digest<\/p>',\n- );\n- } else {\n- expect(container.innerHTML).toBe('

digest(\"for reasons\")<\/p>');\n- }\n-\n- expect(reportedErrors).toEqual(['for reasons']);\n- });\n-\n- it('should be able to recover from a direct reference erroring client-side', async () => {\n- const reportedErrors = [];\n-\n- const ClientComponent = clientExports(function ({prop}) {\n- return 'This should never render';\n- });\n-\n- const ClientReference = clientModuleError(new Error('module init error'));\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n-

\n- \n- <\/div>,\n- turbopackMap,\n- {\n- onError(x) {\n- reportedErrors.push(x);\n- },\n- },\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n-\n- function App({res}) {\n- return use(res);\n- }\n-\n- await act(() => {\n- root.render(\n-

{e.message}<\/p>}>\n- (loading)<\/p>}>\n- \n- <\/Suspense>\n- <\/ErrorBoundary>,\n- );\n- });\n- expect(container.innerHTML).toBe('

module init error<\/p>');\n-\n- expect(reportedErrors).toEqual([]);\n- });\n-\n- it('should be able to recover from a direct reference erroring client-side async', async () => {\n- const reportedErrors = [];\n-\n- const ClientComponent = clientExports(function ({prop}) {\n- return 'This should never render';\n- });\n-\n- let rejectPromise;\n- const ClientReference = await clientExports(\n- new Promise((resolve, reject) => {\n- rejectPromise = reject;\n- }),\n- );\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n-

{e.message}<\/p>}>\n- (loading)<\/p>}>\n- \n- <\/Suspense>\n- <\/ErrorBoundary>,\n- );\n- });\n-\n- expect(container.innerHTML).toBe('

(loading)<\/p>');\n-\n- await act(() => {\n- rejectPromise(new Error('async module init error'));\n- });\n-\n- expect(container.innerHTML).toBe('

async module init error<\/p>');\n-\n- expect(reportedErrors).toEqual([]);\n- });\n-\n- it('should be able to recover from a direct reference erroring server-side', async () => {\n- const reportedErrors = [];\n-\n- const ClientComponent = clientExports(function ({prop}) {\n- return 'This should never render';\n- });\n-\n- \/\/ We simulate a bug in the Webpack bundler which causes an error on the server.\n- for (const id in turbopackMap) {\n- Object.defineProperty(turbopackMap, id, {\n- get: () => {\n- throw new Error('bug in the bundler');\n- },\n- });\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n-

\n- \n- <\/div>,\n- turbopackMap,\n- {\n- onError(x) {\n- reportedErrors.push(x.message);\n- return __DEV__ ? 'a dev digest' : `digest(\"${x.message}\")`;\n- },\n- },\n- );\n- pipe(writable);\n-\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n-\n- function App({res}) {\n- return use(res);\n- }\n-\n- await act(() => {\n- root.render(\n- (\n-

\n- {__DEV__ ? e.message + ' + ' : null}\n- {e.digest}\n- <\/p>\n- )}>\n- (loading)<\/p>}>\n- \n- <\/Suspense>\n- <\/ErrorBoundary>,\n- );\n- });\n- if (__DEV__) {\n- expect(container.innerHTML).toBe(\n- '

bug in the bundler + a dev digest<\/p>',\n- );\n- } else {\n- expect(container.innerHTML).toBe('

digest(\"bug in the bundler\")<\/p>');\n- }\n-\n- expect(reportedErrors).toEqual(['bug in the bundler']);\n- });\n-\n- it('should pass a Promise through props and be able use() it on the client', async () => {\n- async function getData() {\n- return 'async hello';\n- }\n-\n- function Component({data}) {\n- const text = use(data);\n- return

{text}<\/p>;\n- }\n-\n- const ClientComponent = clientExports(Component);\n-\n- function ServerComponent() {\n- const data = getData(); \/\/ no await here\n- return ;\n- }\n-\n- function Print({response}) {\n- return use(response);\n- }\n-\n- function App({response}) {\n- return (\n- Loading...<\/h1>}>\n- \n- <\/Suspense>\n- );\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe('

async hello<\/p>');\n- });\n-\n- it('should throw on the client if a passed promise eventually rejects', async () => {\n- const reportedErrors = [];\n- const theError = new Error('Server throw');\n-\n- async function getData() {\n- throw theError;\n- }\n-\n- function Component({data}) {\n- const text = use(data);\n- return

\n- {__DEV__ ? e.message + ' + ' : null}\n- {e.digest}\n- <\/p>\n- )}>\n- \n- <\/ErrorBoundary>\n- <\/Suspense>\n- );\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- {\n- onError(x) {\n- reportedErrors.push(x);\n- return __DEV__ ? 'a dev digest' : `digest(\"${x.message}\")`;\n- },\n- },\n- );\n- pipe(writable);\n- const response = ReactServerDOMClient.createFromReadableStream(readable);\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- expect(container.innerHTML).toBe(\n- __DEV__\n- ? '

Server throw + a dev digest<\/p>'\n- : '

digest(\"Server throw\")<\/p>',\n- );\n- expect(reportedErrors).toEqual([theError]);\n- });\n-\n- it('should support float methods when rendering in Fiber', async () => {\n- function Component() {\n- return

hello world<\/p>;\n- }\n-\n- const ClientComponent = clientExports(Component);\n-\n- async function ServerComponent() {\n- FlightReactDOM.prefetchDNS('d before');\n- FlightReactDOM.preconnect('c before');\n- FlightReactDOM.preconnect('c2 before', {crossOrigin: 'anonymous'});\n- FlightReactDOM.preload('l before', {as: 'style'});\n- FlightReactDOM.preloadModule('lm before');\n- FlightReactDOM.preloadModule('lm2 before', {crossOrigin: 'anonymous'});\n- FlightReactDOM.preinit('i before', {as: 'script'});\n- FlightReactDOM.preinitModule('m before');\n- FlightReactDOM.preinitModule('m2 before', {crossOrigin: 'anonymous'});\n- await 1;\n- FlightReactDOM.prefetchDNS('d after');\n- FlightReactDOM.preconnect('c after');\n- FlightReactDOM.preconnect('c2 after', {crossOrigin: 'anonymous'});\n- FlightReactDOM.preload('l after', {as: 'style'});\n- FlightReactDOM.preloadModule('lm after');\n- FlightReactDOM.preloadModule('lm2 after', {crossOrigin: 'anonymous'});\n- FlightReactDOM.preinit('i after', {as: 'script'});\n- FlightReactDOM.preinitModule('m after');\n- FlightReactDOM.preinitModule('m2 after', {crossOrigin: 'anonymous'});\n- return ;\n- }\n-\n- const {writable, readable} = getTestStream();\n- const {pipe} = ReactServerDOMServer.renderToPipeableStream(\n- ,\n- turbopackMap,\n- );\n- pipe(writable);\n-\n- let response = null;\n- function getResponse() {\n- if (response === null) {\n- response = ReactServerDOMClient.createFromReadableStream(readable);\n- }\n- return response;\n- }\n-\n- function App() {\n- return getResponse();\n- }\n-\n- \/\/ We pause to allow the float call after the await point to process before the\n- \/\/ HostDispatcher gets set for Fiber by createRoot. This is only needed in testing\n- \/\/ because the module graphs are not different and the HostDispatcher is shared.\n- \/\/ In a real environment the Fiber and Flight code would each have their own independent\n- \/\/ dispatcher.\n- \/\/ @TODO consider what happens when Server-Components-On-The-Client exist. we probably\n- \/\/ want to use the Fiber HostDispatcher there too since it is more about the host than the runtime\n- \/\/ but we need to make sure that actually makes sense\n- await 1;\n-\n- const container = document.createElement('div');\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n-\n- expect(getMeaningfulChildren(document)).toEqual(\n- \n- \n- \n- \n- \n- \n- \n- \n-

dillon1000/react

Files changed