first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/test/development/app-dir/cache-components-dev-cache-scope/app/api/data.ts
+++ b/test/development/app-dir/cache-components-dev-cache-scope/app/api/data.ts
@@ -0,0 +1,9 @@
+function delay() {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 100)
+  })
+}
+export async function fetchData() {
+  await delay()
+  return '' + Math.random()
+}
--- a/test/development/app-dir/cache-components-dev-cache-scope/app/cached/page.tsx
+++ b/test/development/app-dir/cache-components-dev-cache-scope/app/cached/page.tsx
@@ -0,0 +1,38 @@
+import { revalidateTag, cacheLife, cacheTag } from 'next/cache'
+import { fetchData } from '../api/data'
+// import { Suspense } from 'react'
+// import { cookies, headers } from 'next/headers'
+
+function InnerComponent({ children }) {
+  return <span id="value">{children}</span>
+}
+
+async function refresh() {
+  'use server'
+  revalidateTag('hello')
+}
+
+async function reload() {
+  'use server'
+}
+
+async function Component() {
+  'use cache'
+  cacheLife({ revalidate: 30 })
+  cacheTag('hello')
+  return <InnerComponent>{await fetchData()}</InnerComponent>
+}
+
+export default async function Home() {
+  return (
+    <>
+      <form action={refresh}>
+        <button id="refresh">Refresh</button>
+      </form>
+      <form action={reload}>
+        <button id="reload">Reload</button>
+      </form>
+      <Component />
+    </>
+  )
+}
--- a/test/development/app-dir/cache-components-dev-cache-scope/app/layout.tsx
+++ b/test/development/app-dir/cache-components-dev-cache-scope/app/layout.tsx
@@ -0,0 +1,9 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
--- a/test/development/app-dir/cache-components-dev-cache-scope/app/uncached/page.tsx
+++ b/test/development/app-dir/cache-components-dev-cache-scope/app/uncached/page.tsx
@@ -0,0 +1,33 @@
+import { fetchData } from '../api/data'
+// import { Suspense } from 'react'
+// import { cookies, headers } from 'next/headers'
+
+function InnerComponent({ children }) {
+  return <span id="value">{children}</span>
+}
+
+async function refresh() {
+  'use server'
+}
+
+async function reload() {
+  'use server'
+}
+
+async function Component() {
+  return <InnerComponent>{await fetchData()}</InnerComponent>
+}
+
+export default async function Home() {
+  return (
+    <>
+      <form action={refresh}>
+        <button id="refresh">Refresh</button>
+      </form>
+      <form action={reload}>
+        <button id="reload">Reload</button>
+      </form>
+      <Component />
+    </>
+  )
+}
--- a/test/development/app-dir/cache-components-dev-cache-scope/cache-components-dev-cache-scope.test.ts
+++ b/test/development/app-dir/cache-components-dev-cache-scope/cache-components-dev-cache-scope.test.ts
@@ -0,0 +1,86 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  getRedboxDescription,
+  openRedbox,
+  waitForNoRedbox,
+  retry,
+} from 'next-test-utils'
+
+describe('Cache Components Dev Errors', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should not show a red box error on the SSR render', async () => {
+    const browser = await next.browser('/cached')
+    await waitForNoRedbox(browser)
+    let latestValue = await browser.elementByCss('#value').text()
+
+    await browser.refresh()
+    await waitForNoRedbox(browser)
+    let priorValue = latestValue
+    latestValue = await browser.elementByCss('#value').text()
+
+    expect(latestValue).toBe(priorValue)
+
+    await browser.elementByCss('#refresh').click()
+    await retry(async () => {
+      await waitForNoRedbox(browser)
+      let priorValue = latestValue
+      latestValue = await browser.elementByCss('#value').text()
+      expect(latestValue).not.toBe(priorValue)
+    })
+
+    await browser.elementByCss('#refresh').click()
+    await retry(async () => {
+      await waitForNoRedbox(browser)
+      let priorValue = latestValue
+      latestValue = await browser.elementByCss('#value').text()
+      expect(latestValue).not.toBe(priorValue)
+    })
+
+    // TODO CI is too flakey to run tests like this b/c timing cannot be controlled.
+    // we need to land this so we're deactivating these assertions for now.
+    // you should be able to reproduce the assertions below when testing locally
+
+    // await browser.elementByCss('#reload').click()
+    // await retry(async () => {
+    //   await waitForNoRedbox(browser)
+    //   let priorValue = latestValue
+    //   latestValue = await browser.elementByCss('#value').text()
+    //   expect(latestValue).toBe(priorValue)
+    // })
+
+    // await browser.elementByCss('#reload').click()
+    // await retry(async () => {
+    //   await waitForNoRedbox(browser)
+    //   let priorValue = latestValue
+    //   latestValue = await browser.elementByCss('#value').text()
+    //   expect(latestValue).toBe(priorValue)
+    // })
+
+    // await browser.elementByCss('#refresh').click()
+    // await retry(async () => {
+    //   await waitForNoRedbox(browser)
+    //   let priorValue = latestValue
+    //   latestValue = await browser.elementByCss('#value').text()
+    //   expect(latestValue).not.toBe(priorValue)
+    // })g
+  })
+
+  it('should show a red box error on the SSR render when data is uncached', async () => {
+    let desc
+
+    const browser = await next.browser('/uncached')
+    await openRedbox(browser)
+    desc = await getRedboxDescription(browser)
+
+    expect(desc).toContain('https://nextjs.org/docs/messages/blocking-route')
+
+    await browser.refresh()
+    await openRedbox(browser)
+    desc = await getRedboxDescription(browser)
+
+    expect(desc).toContain('https://nextjs.org/docs/messages/blocking-route')
+  })
+})
--- a/test/development/app-dir/cache-components-dev-cache-scope/next.config.js
+++ b/test/development/app-dir/cache-components-dev-cache-scope/next.config.js
@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  cacheComponents: true,
+}
+
+module.exports = nextConfig