clean up react 18 tests

packages/next/shared/lib/dynamic.tsx

@@ -117,14 +117,11 @@ export default function dynamic<P = {}>(
   const suspenseOptions = loadableOptions as LoadableSuspenseOptions & {
     loader: Loader<P>
   }
-  if (!process.env.__NEXT_CONCURRENT_FEATURES) {
-    // Error if react root is not enabled and `suspense` option is set to true
-    if (!process.env.__NEXT_REACT_ROOT && suspenseOptions.suspense) {
-      // TODO: add error doc when this feature is stable
-      throw new Error(
-        `Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
-      )
-    }
+  // Error if Fizz rendering is not enabled and `suspense` option is set to true
+  if (!process.env.__NEXT_CONCURRENT_FEATURES && suspenseOptions.suspense) {
+    throw new Error(
+      `Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense`
+    )
   }
   if (suspenseOptions.suspense) {
     return loadableFn(suspenseOptions)

test/integration/react-18-invalid-config/index.test.js

@@ -24,21 +24,37 @@ describe('Invalid react 18 webpack config', () => {
       '`experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18.'
     )
   })
+})
 
-  it('should warn user when not using react 18 and `experimental.reactRoot` is enabled', async () => {
+describe('React 17 with React 18 config', () => {
+  beforeAll(() => {
     const reactDomPackagePah = join(appDir, 'node_modules/react-dom')
     await fs.mkdirp(reactDomPackagePah)
     await fs.writeFile(
       join(reactDomPackagePah, 'package.json'),
       JSON.stringify({ name: 'react-dom', version: '17.0.0' })
     )
     writeNextConfig({ reactRoot: true })
-    const { stderr } = await nextBuild(appDir, [], { stderr: true })
+  })
+  afterAll(() => {
     await fs.remove(reactDomPackagePah)
     nextConfig.restore()
+  })
 
+  it('should warn user when not using react 18 and `experimental.reactRoot` is enabled', async () => {
+    const { stderr } = await nextBuild(appDir, [], { stderr: true })
     expect(stderr).toContain(
       'You have to use React 18 to use `experimental.reactRoot`.'
     )
   })
+
+  test('suspense is not allowed in blocking rendering mode', async () => {
+    const { stderr, code } = await nextBuild(appDir, [], {
+      stderr: true,
+    })
+    expect(stderr).toContain(
+      'Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense'
+    )
+    expect(code).toBe(1)
+  })
 })

test/integration/react-18/app/components/bar.js

@@ -1,22 +1,20 @@
 import { Suspense } from 'react'
 import dynamic from 'next/dynamic'
-import { useCachedPromise } from './promise-cache'
+import { createStreamingData } from '../../test/streaming-data'
 
 const Foo = dynamic(() => import('./foo'), {
   suspense: true,
 })
 
-export default function Bar() {
-  useCachedPromise(
-    'bar',
-    () => new Promise((resolve) => setTimeout(resolve, 300)),
-    true
-  )
+const Data = createStreamingData('bar')
 
+export default function Bar() {
   return (
     <div>
-      bar
-      <Suspense fallback={'oof'}>
+      <Suspense>
+        <Data />
+      </Suspense>
+      <Suspense fallback={'fallback'}>
         <Foo />
       </Suspense>
     </div>

test/integration/react-18/test/basics.js

@@ -17,14 +17,6 @@ export default (context) => {
     expect(await browser.elementById('react-dom-version').text()).toMatch(/18/)
   })
 
-  it('should works with suspense in ssg', async () => {
-    const res1 = await fetchViaHTTP(context.appPort, '/suspense/thrown')
-    const res2 = await fetchViaHTTP(context.appPort, '/suspense/no-thrown')
-
-    expect(res1.status).toBe(200)
-    expect(res2.status).toBe(200)
-  })
-
   it('should render fallback without preloads on server side', async () => {
     const html = await renderViaHTTP(context.appPort, '/suspense/no-preload')
     const $ = cheerio.load(html)

test/integration/react-18/test/concurrent.js

@@ -62,15 +62,6 @@ export default (context, _render) => {
     })
   })
 
-  it('should drain the entire response', async () => {
-    await withBrowser('/suspense/backpressure', async (browser) => {
-      await check(
-        () => browser.eval('document.querySelectorAll(".item").length'),
-        /2000/
-      )
-    })
-  })
-
   it('throws if useFlushEffects is used more than once', async () => {
     await renderViaHTTP(context.appPort, '/use-flush-effect/multiple-calls')
     expect(context.stderr).toContain(

test/integration/react-18/test/index.test.js

@@ -13,7 +13,6 @@ import {
   hasRedbox,
   getRedboxHeader,
 } from 'next-test-utils'
-import blocking from './blocking'
 import concurrent from './concurrent'
 import basics from './basics'
 import strictMode from './strict-mode'
@@ -26,71 +25,6 @@ const nextConfig = new File(join(appDir, 'next.config.js'))
 const dynamicHello = new File(join(appDir, 'components/dynamic-hello.js'))
 const invalidPage = new File(join(appDir, 'pages/invalid.js'))
 
-const USING_CREATE_ROOT = 'Using the createRoot API for React'
-
-async function getBuildOutput(dir) {
-  const { stdout, stderr } = await nextBuild(dir, [], {
-    stdout: true,
-    stderr: true,
-    nodeArgs,
-  })
-  return stdout + stderr
-}
-
-async function getDevOutput(dir) {
-  const port = await findPort()
-
-  let stdout = ''
-  let stderr = ''
-  let instance = await launchApp(dir, port, {
-    stdout: true,
-    stderr: true,
-    onStdout(msg) {
-      stdout += msg
-    },
-    onStderr(msg) {
-      stderr += msg
-    },
-    nodeArgs,
-  })
-  await killApp(instance)
-  return stdout + stderr
-}
-
-describe('React 18 Support', () => {
-  describe('Use legacy render', () => {
-    beforeAll(() => {
-      nextConfig.replace('reactRoot: true', 'reactRoot: false')
-    })
-    afterAll(() => {
-      nextConfig.restore()
-    })
-
-    test('supported version of react in dev', async () => {
-      const output = await getDevOutput(appDir)
-      expect(output).not.toMatch(USING_CREATE_ROOT)
-    })
-
-    test('supported version of react in build', async () => {
-      const output = await getBuildOutput(appDir)
-      expect(output).not.toMatch(USING_CREATE_ROOT)
-    })
-
-    test('suspense is not allowed in blocking rendering mode', async () => {
-      nextConfig.replace('withReact18({', '/*withReact18*/({')
-      const { stderr, code } = await nextBuild(appDir, [], {
-        stderr: true,
-      })
-      nextConfig.replace('/*withReact18*/({', 'withReact18({')
-
-      expect(stderr).toContain(
-        'Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense'
-      )
-      expect(code).toBe(1)
-    })
-  })
-})
-
 describe('Basics', () => {
   runTests('default setting with react 18', (context) => basics(context))
 })
@@ -115,19 +49,6 @@ describe('Strict mode - dev', () => {
   strictMode(context)
 })
 
-describe('Blocking mode', () => {
-  beforeAll(() => {
-    dynamicHello.replace('suspense = false', `suspense = true`)
-  })
-  afterAll(() => {
-    dynamicHello.restore()
-  })
-
-  runTests('`runtime` is disabled', (context) => {
-    blocking(context, (p, q) => renderViaHTTP(context.appPort, p, q))
-  })
-})
-
 function runTestsAgainstRuntime(runtime) {
   runTests(
     `Concurrent mode in the ${runtime} runtime`,

test/integration/react-18/test/streaming-data.js

@@ -0,0 +1,16 @@
+export function createStreamingData(value) {
+  let result
+  let promise
+  function Data() {
+    if (result) return result
+    if (!promise)
+      promise = new Promise((res) => {
+        setTimeout(() => {
+          result = value
+          res()
+        }, 500)
+      })
+    throw promise
+  }
+  return Data
+}

test/integration/react-streaming-and-server-components/app/pages/various-exports.server.js

@@ -23,12 +23,12 @@ export default function Page() {
       <div>
         <ClientNamed />
       </div>
-      <di>
+      <div>
         <CjsShared />
-      </di>
-      <di>
+      </div>
+      <div>
         <CjsClient />
-      </di>
+      </div>
     </div>
   )
 }