diff --git a/test/integration/react-18/app/components/bar.js b/test/integration/react-18/app/components/bar.js
deleted file mode 100644
index 20b105c45c9..00000000000
--- a/test/integration/react-18/app/components/bar.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-import { createStreamingData } from '../../test/streaming-data'
-
-const Foo = dynamic(() => import('./foo'), {
- suspense: true,
-})
-
-const Data = createStreamingData('bar')
-
-export default function Bar() {
- return (
-
-
-
-
-
-
-
-
- )
-}
diff --git a/test/integration/react-18/app/components/dynamic-hello.js b/test/integration/react-18/app/components/dynamic-hello.js
deleted file mode 100644
index 61d0ecaea9b..00000000000
--- a/test/integration/react-18/app/components/dynamic-hello.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-
-let ssr
-const suspense = false
-
-const Hello = dynamic(() => import('./hello'), {
- ssr,
- suspense,
-})
-
-export default function DynamicHello(props) {
- return (
-
-
-
- )
-}
diff --git a/test/integration/react-18/app/components/foo.js b/test/integration/react-18/app/components/foo.js
deleted file mode 100644
index 3689dc33e30..00000000000
--- a/test/integration/react-18/app/components/foo.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Foo() {
- return 'foo'
-}
diff --git a/test/integration/react-18/app/components/hello.js b/test/integration/react-18/app/components/hello.js
deleted file mode 100644
index 2812405370b..00000000000
--- a/test/integration/react-18/app/components/hello.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { useCachedPromise } from './promise-cache'
-
-export default function Hello({ name, thrown = false }) {
- useCachedPromise(
- name,
- () => new Promise((resolve) => setTimeout(resolve, 200)),
- thrown
- )
-
- const [hydrated, setHydrated] = React.useState(() => false)
- React.useEffect(() => {
- if (!hydrated) {
- setHydrated(true)
- }
- }, [hydrated])
-
- const serverRendered = React.useMemo(() => {
- if (typeof window === 'undefined') {
- return true
- }
- const elem = document.getElementById('server-rendered')
- if (elem) {
- return elem.innerText === 'true'
- }
- return false
- }, [])
-
- return (
-
- hello {ReactDOM.version}
- {serverRendered.toString()}
- {hydrated ? {hydrated.toString()} : null}
-
- )
-}
diff --git a/test/integration/react-18/app/components/promise-cache.js b/test/integration/react-18/app/components/promise-cache.js
deleted file mode 100644
index eab490fb9ae..00000000000
--- a/test/integration/react-18/app/components/promise-cache.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-
-const PromiseCacheContext = React.createContext(null)
-
-export const cache = new Map()
-export const PromiseCacheProvider = PromiseCacheContext.Provider
-
-export function useCachedPromise(key, fn, thrown = false) {
- const cache = React.useContext(PromiseCacheContext)
-
- if (!thrown) return undefined
- let entry = cache.get(key)
- if (!entry) {
- entry = {
- status: 'PENDING',
- value: fn().then(
- (value) => {
- cache.set(key, {
- status: 'RESOLVED',
- value,
- })
- },
- (err) => {
- cache.set(key, {
- status: 'REJECTED',
- value: err,
- })
- }
- ),
- }
- cache.set(key, entry)
- }
- if (['PENDING', 'REJECTED'].includes(entry.status)) {
- throw entry.value
- }
- return entry.value
-}
diff --git a/test/integration/react-18/app/components/red.js b/test/integration/react-18/app/components/red.js
deleted file mode 100644
index 8f92c5ccc52..00000000000
--- a/test/integration/react-18/app/components/red.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import { useCachedPromise } from './promise-cache'
-
-export default function Styled({ name }) {
- useCachedPromise(
- name,
- () => new Promise((resolve) => setTimeout(resolve, 1000)),
- true
- )
-
- return (
-
- )
-}
diff --git a/test/integration/react-18/app/components/red.tsx b/test/integration/react-18/app/components/red.tsx
new file mode 100644
index 00000000000..3da9eaccfef
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ )
+}
diff --git a/test/integration/react-18/app/components/ts-foo.tsx b/test/integration/react-18/app/components/ts-foo.tsx
deleted file mode 100644
index f29172cb4aa..00000000000
--- a/test/integration/react-18/app/components/ts-foo.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function TsFoo() {
- return ts-foo
-}
diff --git a/test/integration/react-18/app/pages/_app.js.txt b/test/integration/react-18/app/pages/_app.js.txt
deleted file mode 100644
index 1f136e7e8a8..00000000000
--- a/test/integration/react-18/app/pages/_app.js.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PromiseCacheProvider } from '../components/promise-cache'
-
-function MyApp({ Component, pageProps }) {
- return (
-
-
-
- )
-}
-
-export default MyApp
diff --git a/test/integration/react-18/app/pages/ssr.js b/test/integration/react-18/app/pages/ssr.js
deleted file mode 100644
index 456cff7cb48..00000000000
--- a/test/integration/react-18/app/pages/ssr.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function SSR() {
- return 'hello'
-}
-
-export function getServerSideProps() {
- // Prevent static optimization
- return { props: {} }
-}
diff --git a/test/integration/react-18/app/pages/suspense/no-preload.js b/test/integration/react-18/app/pages/suspense/no-preload.js
deleted file mode 100644
index 8ae8c7c599f..00000000000
--- a/test/integration/react-18/app/pages/suspense/no-preload.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-
-const Bar = dynamic(() => import('../../components/bar'), {
- ssr: false,
- suspense: true,
- // Explicitly declare loaded modules.
- // For suspense cases, they'll be ignored.
- // For loadable component cases, they'll be handled
- loadableGenerated: {
- modules: ['../../components/bar'],
- webpack: [require.resolveWeak('../../components/bar')],
- },
-})
-
-export default function NoPreload() {
- return (
-
-
-
- )
-}
diff --git a/test/integration/react-18/app/pages/suspense/typing.tsx b/test/integration/react-18/app/pages/suspense/typing.tsx
deleted file mode 100644
index 5b5df73d736..00000000000
--- a/test/integration/react-18/app/pages/suspense/typing.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Suspense } from 'react'
-import dynamic from 'next/dynamic'
-
-const DynamicFoo = dynamic(() => import('../../components/ts-foo'), {
- suspense: true,
-})
-
-export default function Typing() {
- return (
-
-
-
- )
-}
diff --git a/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js b/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx
similarity index 87%
rename from test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js
rename to test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx
index 27105d3f9c3..039f554337c 100644
--- a/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js
+++ b/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'
diff --git a/test/integration/react-18/test/basics.js b/test/integration/react-18/test/basics.js
index 49caa0fffbb..051b6d4d2d5 100644
--- a/test/integration/react-18/test/basics.js
+++ b/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()
- // 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)
diff --git a/test/integration/react-18/test/concurrent.js b/test/integration/react-18/test/concurrent.js
index a49bcd4d5e9..92871dbab3b 100644
--- a/test/integration/react-18/test/concurrent.js
+++ b/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/
)
})
diff --git a/test/integration/react-18/test/index.test.js b/test/integration/react-18/test/index.test.js
index a73fe010d53..168c815bc5b 100644
--- a/test/integration/react-18/test/index.test.js
+++ b/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()
},
}
)
diff --git a/test/integration/react-18/test/streaming-data.js b/test/integration/react-18/test/streaming-data.js
index 476170e90cb..7940347c394 100644
--- a/test/integration/react-18/test/streaming-data.js
+++ b/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
}
diff --git a/test/integration/react-streaming-and-server-components/app/components/bar.client.js b/test/integration/react-streaming-and-server-components/app/components/bar.client.js
new file mode 100644
index 00000000000..b58488a9c3b
--- /dev/null
+++ b/test/integration/react-streaming-and-server-components/app/components/bar.client.js
@@ -0,0 +1,3 @@
+export default function bar() {
+ return 'bar.client'
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js b/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js
index 60e8bf7fe0c..2b3c34f65a8 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js
+++ b/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 (
-
+
+
)
diff --git a/test/integration/react-streaming-and-server-components/app/pages/index.server.js b/test/integration/react-streaming-and-server-components/app/pages/index.server.js
index 4bbf05c5523..7ca7e5e3085 100644
--- a/test/integration/react-streaming-and-server-components/app/pages/index.server.js
+++ b/test/integration/react-streaming-and-server-components/app/pages/index.server.js
@@ -1,4 +1,3 @@
-import Foo from '../components/foo.client'
import Nav from '../components/nav.server'
const envVar = process.env.ENV_VAR_TEST
@@ -11,9 +10,6 @@ export default function Index({ header, router }) {
{'path:' + router.pathname}
{'env:' + envVar}
{'header:' + header}
-
-
-
)
diff --git a/test/integration/react-streaming-and-server-components/test/basic.js b/test/integration/react-streaming-and-server-components/test/basic.js
index c46f5c42836..5c5aec7ba82 100644
--- a/test/integration/react-streaming-and-server-components/test/basic.js
+++ b/test/integration/react-streaming-and-server-components/test/basic.js
@@ -61,6 +61,8 @@ export default async function basic(context, { env }) {
const browser = await webdriver(context.appPort, '/dynamic-imports')
const content = await browser.eval(`window.document.body.innerText`)
- expect(content).toMatchInlineSnapshot('"foo.client"')
+ const dynamicIds = await browser.eval(`__NEXT_DATA__.dynamicIds`)
+ expect(content).toMatchInlineSnapshot('"foo.clientbar.client"')
+ expect(dynamicIds).toBe(undefined)
})
}
diff --git a/test/integration/react-streaming-and-server-components/test/rsc.js b/test/integration/react-streaming-and-server-components/test/rsc.js
index 0078f7056f6..e96e8dd40f8 100644
--- a/test/integration/react-streaming-and-server-components/test/rsc.js
+++ b/test/integration/react-streaming-and-server-components/test/rsc.js
@@ -20,7 +20,6 @@ export default function (context, { runtime, env }) {
expect(homeHTML).toContain('env:env_var_test')
expect(homeHTML).toContain('header:test-util')
expect(homeHTML).toContain('path:/')
- expect(homeHTML).toContain('foo.client')
})
it('should reuse the inline flight response without sending extra requests', async () => {