test: clean up legacy tests

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,16 +17,6 @@ export default (context) => {
     expect(await browser.elementById('react-dom-version').text()).toMatch(/18/)
   })
 
-  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)

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

@@ -7,7 +7,7 @@ export default (context, _render) => {
   async function withBrowser(path, cb) {
     let browser
     try {
-      browser = await webdriver(context.appPort, path, false)
+      browser = await webdriver(context.appPort, path)
       await cb(browser)
     } finally {
       if (browser) {
@@ -16,52 +16,6 @@ export default (context, _render) => {
     }
   }
 
-  it('should resolve suspense modules on server side if suspense', async () => {
-    await withBrowser('/suspense/no-preload', async (browser) => {
-      await check(() => browser.waitForElementByCss('#__next').text(), /barfoo/)
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
-  it('should resolve suspense on server side if not suspended on server', async () => {
-    await withBrowser('/suspense/no-thrown', async (browser) => {
-      await check(
-        () => browser.waitForElementByCss('#server-rendered').text(),
-        /true/
-      )
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
-  it('should resolve suspense on server side if suspended on server', async () => {
-    await withBrowser('/suspense/thrown', async (browser) => {
-      await check(
-        () => browser.waitForElementByCss('#server-rendered').text(),
-        /true/
-      )
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
-  it('should hydrate suspenses on client side if suspended on server', async () => {
-    await withBrowser('/suspense/thrown', async (browser) => {
-      await check(() => browser.waitForElementByCss('#hydrated').text(), /true/)
-      await check(
-        () => browser.eval('typeof __NEXT_DATA__.dynamicIds'),
-        /undefined/
-      )
-    })
-  })
-
   it('throws if useFlushEffects is used more than once', async () => {
     await renderViaHTTP(context.appPort, '/use-flush-effect/multiple-calls')
     expect(context.stderr).toContain(
@@ -85,7 +39,7 @@ export default (context, _render) => {
         /blue/
       )
       await check(
-        () => browser.waitForElementByCss('#__jsx-c74678abd3b78a').text(),
+        () => browser.waitForElementByCss('#__jsx-8b0811664c4e575e').text(),
         /red/
       )
     })

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

@@ -22,7 +22,6 @@ import webdriver from 'next-webdriver'
 const nodeArgs = ['-r', join(__dirname, 'require-hook.js')]
 const appDir = join(__dirname, '../app')
 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'))
 
 describe('Basics', () => {
@@ -72,16 +71,12 @@ function runTestsAgainstRuntime(runtime) {
           invalidPage.write(`export const value = 1`)
         }
         nextConfig.replace("// runtime: 'edge'", `runtime: '${runtime}'`)
-        dynamicHello.replace('suspense = false', `suspense = true`)
-        // `noSSR` mode will be ignored by suspense
-        dynamicHello.replace('let ssr', `let ssr = false`)
       },
       afterAll: (env) => {
         if (env === 'dev') {
           invalidPage.delete()
         }
         nextConfig.restore()
-        dynamicHello.restore()
       },
     }
   )

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

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

test/integration/react-streaming-and-server-components/app/components/bar.client.js

@@ -0,0 +1,3 @@
+export default function bar() {
+  return 'bar.client'
+}

test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js

@@ -1,12 +1,17 @@
 import { lazy, Suspense } from 'react'
+import dynamic from 'next/dynamic'
 
 const Foo = lazy(() => import('../components/foo.client'))
+const Bar = dynamic(() => import('../components/bar.client'), {
+  suspense: true,
+})
 
 export default function Page() {
   return (
     <div>
-      <Suspense fallback="loading...">
+      <Suspense fallback="fallback">
         <Foo />
+        <Bar />
       </Suspense>
     </div>
   )