Failing test for client navigation to layout with React.Suspense

vercel · Jan 6, 2025 · 65c97fa · 65c97fa
1 parent c94fdef
commit 65c97fa
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 0 deletions.
diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/layout.js b/test/e2e/app-dir/navigation-layout-suspense/app/layout.js
@@ -0,0 +1,7 @@
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/nested/layout.js b/test/e2e/app-dir/navigation-layout-suspense/app/nested/layout.js
@@ -0,0 +1,31 @@
+import { Suspense } from 'react'
+import Link from 'next/link'
+
+export const dynamic = 'force-dynamic'
+
+async function LoadData(props) {
+  await fetch('https://next-data-api-endpoint.vercel.app/api/random?b').then(
+    (res) => res.text()
+  )
+  return (
+    <>
+      {props.children}
+      <div>Got API Response </div>
+    </>
+  )
+}
+
+export default async function Layout(props) {
+  return (
+    <>
+      <div>
+        <Link href={`/`} className="text-blue-500">
+          Home Page
+        </Link>
+      </div>
+      <Suspense fallback={<h1>Loading...</h1>}>
+        <LoadData>{props.children}</LoadData>
+      </Suspense>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/nested/page.js b/test/e2e/app-dir/navigation-layout-suspense/app/nested/page.js
@@ -0,0 +1,7 @@
+export default function NestedPage() {
+  return (
+    <>
+      <h1 data-testid="nested-resolved">This is the nested Page</h1>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-layout-suspense/app/page.js b/test/e2e/app-dir/navigation-layout-suspense/app/page.js
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <>
+      <div>
+        <Link href={`/nested`} className="text-blue-500">
+          nested Page
+        </Link>
+      </div>
+      <h1>This is the Home Page</h1>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/navigation-layout-suspense/navigation-layout-suspense.test.ts b/test/e2e/app-dir/navigation-layout-suspense/navigation-layout-suspense.test.ts
@@ -0,0 +1,19 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('app dir - navigation with Suspense in nested layout', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('resolves data after client navigation to a nested layout with Suspense', async () => {
+    const browser = await next.browser('/nested')
+
+    await browser.waitForElementByCss('[data-testid="nested-resolved"]')
+
+    await browser.waitForElementByCss('a[href="/"]').click()
+
+    await browser.waitForElementByCss('a[href="/nested"]').click()
+
+    await browser.waitForElementByCss('[data-testid="nested-resolved"]')
+  })
+})
diff --git a/test/e2e/app-dir/navigation-layout-suspense/next.config.js b/test/e2e/app-dir/navigation-layout-suspense/next.config.js
@@ -0,0 +1 @@
+module.exports = {}