diff --git a/test/e2e/dynamic-with-suspense/index.test.ts b/test/e2e/dynamic-with-suspense/index.test.ts
deleted file mode 100644
index 824d3785ea92..000000000000
--- a/test/e2e/dynamic-with-suspense/index.test.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createNext } from 'e2e-utils'
-import { NextInstance } from 'test/lib/next-modes/base'
-import { hasRedbox, renderViaHTTP } from 'next-test-utils'
-import webdriver from 'next-webdriver'
-
-const suite =
- process.env.NEXT_TEST_REACT_VERSION === '^17' ? describe.skip : describe
-
-// Skip the suspense test if react version is 17
-suite('dynamic with suspense', () => {
- let next: NextInstance
-
- beforeAll(async () => {
- next = await createNext({
- files: {
- 'pages/index.js': `
- import { Suspense } from "react";
- import dynamic from "next/dynamic";
-
- const Thing = dynamic(() => import("./thing"), { ssr: false, suspense: true });
-
- export default function IndexPage() {
- return (
-
-
Next.js Example
-
-
-
-
- );
- }
- `,
- 'pages/thing.js': `
- export default function Thing() {
- return "Thing";
- }
- `,
- },
- dependencies: {},
- })
- })
- afterAll(() => next.destroy())
-
- it('should render server-side', async () => {
- const html = await renderViaHTTP(next.url, '/')
- expect(html).toContain('Next.js Example')
- expect(html).toContain('Thing')
- })
-
- it('should render client-side', async () => {
- const browser = await webdriver(next.url, '/')
- const warnings = (await browser.log()).map((log) => log.message).join('\n')
-
- expect(await hasRedbox(browser)).toBe(false)
- expect(warnings).toMatch(
- /"ssr: false" is ignored by next\/dynamic because you can not enable "suspense" while disabling "ssr" at the same time/gim
- )
-
- await browser.close()
- })
-})
diff --git a/test/integration/next-dynamic-with-suspense/pages/index.js b/test/integration/next-dynamic-with-suspense/pages/index.js
new file mode 100644
index 000000000000..284fcc7f7f8f
--- /dev/null
+++ b/test/integration/next-dynamic-with-suspense/pages/index.js
@@ -0,0 +1,19 @@
+import { Suspense } from 'react'
+import dynamic from 'next/dynamic'
+
+const Thing = dynamic(() => import('./thing'), {
+ ssr: false,
+ suspense: true,
+ loading: () => 'Loading...',
+})
+
+export default function IndexPage() {
+ return (
+
+
Next.js Example
+
+
+
+
+ )
+}
diff --git a/test/integration/next-dynamic-with-suspense/pages/thing.js b/test/integration/next-dynamic-with-suspense/pages/thing.js
new file mode 100644
index 000000000000..561df9831e5b
--- /dev/null
+++ b/test/integration/next-dynamic-with-suspense/pages/thing.js
@@ -0,0 +1,3 @@
+export default function Thing() {
+ return 'Thing'
+}
diff --git a/test/integration/next-dynamic-with-suspense/test/index.test.ts b/test/integration/next-dynamic-with-suspense/test/index.test.ts
new file mode 100644
index 000000000000..625fdde999d5
--- /dev/null
+++ b/test/integration/next-dynamic-with-suspense/test/index.test.ts
@@ -0,0 +1,41 @@
+/* eslint-env jest */
+
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+import {
+ renderViaHTTP,
+ findPort,
+ launchApp,
+ killApp,
+ hasRedbox,
+} from 'next-test-utils'
+
+let app
+let appPort: number
+const appDir = join(__dirname, '../')
+
+describe('next/dynamic with suspense', () => {
+ beforeAll(async () => {
+ appPort = await findPort()
+ app = await launchApp(appDir, appPort)
+ })
+ afterAll(() => killApp(app))
+
+ it('should render server-side', async () => {
+ const html = await renderViaHTTP(appPort, '/')
+ expect(html).toContain('Next.js Example')
+ expect(html).toContain('Thing')
+ })
+
+ it('should render client-side', async () => {
+ const browser = await webdriver(appPort, '/')
+ const warnings = (await browser.log()).map((log) => log.message).join('\n')
+
+ expect(await hasRedbox(browser)).toBe(false)
+ expect(warnings).toMatch(
+ /"ssr: false" is ignored by next\/dynamic because you can not enable "suspense" while disabling "ssr" at the same time/gim
+ )
+
+ await browser.close()
+ })
+})