Clean up legacy react 18 tests (#35615)

### source changes
* Error dynamic suspense option in non concurrent mode, don't check react root anymore since they should be bound

### tests changes

* Remove duplicated rsc client test
* Merge type checking cases (`next/dynamic`)
* Remove blocking rendering tests cases since we should opt-in Fizz rendering when using React.lazy
* Remove some thrown promises cases, leverage the streaming component we had in RSC test

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/components/foo.js

@@ -0,0 +1 @@
+export default () => 'foo'

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

@@ -6,6 +6,7 @@ import { File, nextBuild } from 'next-test-utils'
 
 const appDir = __dirname
 const nextConfig = new File(join(appDir, 'next.config.js'))
+const reactDomPackagePah = join(appDir, 'node_modules/react-dom')
 
 function writeNextConfig(config) {
   const content = `module.exports = { experimental: ${JSON.stringify(config)} }`
@@ -24,21 +25,36 @@ 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 () => {
-    const reactDomPackagePah = join(appDir, 'node_modules/react-dom')
+describe('React 17 with React 18 config', () => {
+  beforeAll(async () => {
     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(async () => {
     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`.'
     )
   })
+
+  it('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-invalid-config/pages/dynamic.js

@@ -0,0 +1,12 @@
+import React, { Suspense } from 'react'
+import dynamic from 'next/dynamic'
+
+const Foo = dynamic(() => import('../components/foo'), { suspense: true })
+
+export default function Dynamic() {
+  return (
+    <Suspense>
+      <Foo />
+    </Suspense>
+  )
+}

test/integration/react-18/app/components/red.tsx

@@ -0,0 +1,21 @@
+import React, { Suspense } from 'react'
+import { createStreamingData } from '../../test/streaming-data'
+
+const Data = createStreamingData()
+
+export default function Styled() {
+  return (
+    <Suspense fallback={`fallback`}>
+      <Data>
+        <div>
+          <p>This is Red.</p>
+          <style jsx>{`
+            p {
+              color: red;
+            }
+          `}</style>
+        </div>
+      </Data>
+    </Suspense>
+  )
+}

test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js → test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx

@@ -1,3 +1,5 @@
+// use tsx to cover typescript usage of next/dynamic + suspense: true
+
 import React from 'react'
 import dynamic from 'next/dynamic'
 

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

@@ -2,7 +2,7 @@
 
 import webdriver from 'next-webdriver'
 import cheerio from 'cheerio'
-import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
+import { renderViaHTTP } from 'next-test-utils'
 
 export default (context) => {
   it('no warnings for image related link props', async () => {
@@ -17,24 +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)
-    const nextData = JSON.parse($('#__NEXT_DATA__').text())
-    const content = $('#__next').text()
-    // <Bar> is suspended
-    expect(content).toBe('fallback')
-    expect(nextData.dynamicIds).toBeUndefined()
-  })
-
   it('useId() values should match on hydration', async () => {
     const html = await renderViaHTTP(context.appPort, '/use-id')
     const $ = cheerio.load(html)