[after] duplicate test pages for edge instead of next.patch (#69477)

`unstable_after` needs to be tested in both nodejs and edge runtimes. Previously, we set the runtime via `next.patch()`, but this proved error-prone (e.g. because `sandbox()` call would override this patch, and not actually run anything in edge...) This PR makes this more static by splitting the test pages for `unstable_after` into `/nodejs` and `/edge`, each with a corresponding `export const runtime = "..."` in its root layout. The pages in `/edge` mirror the structure of `/nodejs` and reexport components from it (which makes the tests easier to update than simply duplicating everything). note that "use client" directives and route segment configs cannot be reexported and need to be duplicated.
vercel · Aug 30, 2024 · 53201b1 · 53201b1
1 parent ae1efa4
commit 53201b1
Show file tree

Hide file tree

Showing 42 changed files with 213 additions and 174 deletions.
diff --git a/...t-after-app/app/invalid-in-client/page.js → ...valid-usage/app/invalid-in-client/page.js b/...t-after-app/app/invalid-in-client/page.js → ...valid-usage/app/invalid-in-client/page.js
@@ -1,4 +1,4 @@
-// 'use client'
+'use client'
 
 import { unstable_after as after } from 'next/server'
 import { cliLog } from '../../utils/log'

diff --git a/...app-dir/next-after-app/app/static/page.js → ...sage/app/invalid-in-dynamic-error/page.js b/...app-dir/next-after-app/app/static/page.js → ...sage/app/invalid-in-dynamic-error/page.js
@@ -1,12 +1,11 @@
 import { unstable_after as after } from 'next/server'
 import { cliLog } from '../../utils/log'
 
-// (patched in tests)
-// export const dynamic = 'REPLACE_ME'
+export const dynamic = 'error'
 
 export default function Index() {
   after(async () => {
-    cliLog({ source: '[page] /static' })
+    cliLog({ source: '[page] /invalid-in-dynamic-error' })
   })
   return <div>Page with after()</div>
 }
diff --git a/...elopment/app-dir/next-after-app-invalid-usage/app/invalid-in-dynamic-force-static/page.js b/...elopment/app-dir/next-after-app-invalid-usage/app/invalid-in-dynamic-force-static/page.js
@@ -0,0 +1,11 @@
+import { unstable_after as after } from 'next/server'
+import { cliLog } from '../../utils/log'
+
+export const dynamic = 'force-static'
+
+export default function Index() {
+  after(async () => {
+    cliLog({ source: '[page] /invalid-in-dynamic-force-static' })
+  })
+  return <div>Page with after()</div>
+}
diff --git a/test/development/app-dir/next-after-app-invalid-usage/app/layout.js b/test/development/app-dir/next-after-app-invalid-usage/app/layout.js
@@ -0,0 +1,10 @@
+export default function AppLayout({ children }) {
+  return (
+    <html>
+      <head>
+        <title>after</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/next-after-app-invalid-usage/index.test.ts b/test/development/app-dir/next-after-app-invalid-usage/index.test.ts
@@ -0,0 +1,50 @@
+/* eslint-env jest */
+import { nextTestSetup } from 'e2e-utils'
+import * as Log from './utils/log'
+import {
+  assertHasRedbox,
+  getRedboxDescription,
+  getRedboxSource,
+} from '../../../lib/next-test-utils'
+
+describe('unstable_after() - invalid usages', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  let currentCliOutputIndex = 0
+  beforeEach(() => {
+    currentCliOutputIndex = next.cliOutput.length
+  })
+
+  const getLogs = () => {
+    if (next.cliOutput.length < currentCliOutputIndex) {
+      // cliOutput shrank since we started the test, so something (like a `sandbox`) reset the logs
+      currentCliOutputIndex = 0
+    }
+    return Log.readCliLogs(next.cliOutput.slice(currentCliOutputIndex))
+  }
+
+  it.each(['error', 'force-static'])(
+    `errors at compile time with dynamic = "%s"`,
+    async (dynamicValue) => {
+      const pathname = '/invalid-in-dynamic-' + dynamicValue
+      const session = await next.browser(pathname)
+
+      await assertHasRedbox(session)
+      expect(await getRedboxDescription(session)).toContain(
+        `Route ${pathname} with \`dynamic = "${dynamicValue}"\` couldn't be rendered statically because it used \`unstable_after\``
+      )
+      expect(getLogs()).toHaveLength(0)
+    }
+  )
+  it('errors at compile time when used in a client module', async () => {
+    const session = await next.browser('/invalid-in-client')
+
+    await assertHasRedbox(session)
+    expect(await getRedboxSource(session)).toMatch(
+      /You're importing a component that needs "?unstable_after"?\. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component\./
+    )
+    expect(getLogs()).toHaveLength(0)
+  })
+})
diff --git a/test/development/app-dir/next-after-app-invalid-usage/next.config.js b/test/development/app-dir/next-after-app-invalid-usage/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  experimental: {
+    after: true,
+  },
+}
diff --git a/test/development/app-dir/next-after-app-invalid-usage/utils/log.js b/test/development/app-dir/next-after-app-invalid-usage/utils/log.js
@@ -0,0 +1,16 @@
+export function cliLog(/** @type {string | Record<string, any>} */ data) {
+  console.log('<test-log>' + JSON.stringify(data) + '</test-log>')
+}
+
+export function readCliLogs(/** @type {string} */ output) {
+  return output
+    .split('\n')
+    .map((line) => {
+      const match = line.match(/^<test-log>(?<value>.+?)<\/test-log>$/)
+      if (!match) {
+        return null
+      }
+      return JSON.parse(match.groups.value)
+    })
+    .filter(Boolean)
+}
diff --git a/test/e2e/app-dir/next-after-app/app/edge/[id]/dynamic/page.js b/test/e2e/app-dir/next-after-app/app/edge/[id]/dynamic/page.js
@@ -0,0 +1 @@
+export { default } from '../../../nodejs/[id]/dynamic/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/[id]/layout.js b/test/e2e/app-dir/next-after-app/app/edge/[id]/layout.js
@@ -0,0 +1 @@
+export { default } from '../../nodejs/[id]/layout'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/[id]/setting-cookies/page.js b/test/e2e/app-dir/next-after-app/app/edge/[id]/setting-cookies/page.js
@@ -0,0 +1 @@
+export { default } from '../../../nodejs/[id]/setting-cookies/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/[id]/with-action/page.js b/test/e2e/app-dir/next-after-app/app/edge/[id]/with-action/page.js
@@ -0,0 +1 @@
+export { default } from '../../../nodejs/[id]/with-action/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/[id]/with-metadata/page.js b/test/e2e/app-dir/next-after-app/app/edge/[id]/with-metadata/page.js
@@ -0,0 +1,4 @@
+export {
+  default,
+  generateMetadata,
+} from '../../../nodejs/[id]/with-metadata/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/delay/page.js b/test/e2e/app-dir/next-after-app/app/edge/delay/page.js
@@ -0,0 +1,3 @@
+export { default } from '../../nodejs/delay/page'
+
+export const dynamic = 'force-dynamic'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/interrupted/calls-not-found/page.js b/test/e2e/app-dir/next-after-app/app/edge/interrupted/calls-not-found/page.js
@@ -0,0 +1 @@
+export { default } from '../../../nodejs/interrupted/calls-not-found/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/interrupted/calls-redirect/page.js b/test/e2e/app-dir/next-after-app/app/edge/interrupted/calls-redirect/page.js
@@ -0,0 +1,5 @@
+import { createPage } from '../../../nodejs/interrupted/calls-redirect/page'
+
+// NOTE: this page is forked from /nodejs
+
+export default createPage('/edge')
diff --git a/test/e2e/app-dir/next-after-app/app/edge/interrupted/redirect-target/page.js b/test/e2e/app-dir/next-after-app/app/edge/interrupted/redirect-target/page.js
@@ -0,0 +1 @@
+export { default } from '../../../nodejs/interrupted/redirect-target/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/interrupted/throws-error/page.js b/test/e2e/app-dir/next-after-app/app/edge/interrupted/throws-error/page.js
@@ -0,0 +1 @@
+export { default } from '../../../nodejs/interrupted/throws-error/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/layout.js b/test/e2e/app-dir/next-after-app/app/edge/layout.js
@@ -0,0 +1,3 @@
+export { default } from '../nodejs/layout'
+
+export const runtime = 'edge'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/middleware/redirect/page.js b/test/e2e/app-dir/next-after-app/app/edge/middleware/redirect/page.js
@@ -0,0 +1 @@
+export { default } from '../../../nodejs/middleware/redirect/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/nested-after/page.js b/test/e2e/app-dir/next-after-app/app/edge/nested-after/page.js
@@ -0,0 +1 @@
+export { default } from '../../nodejs/nested-after/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/provided-request-context/page.js b/test/e2e/app-dir/next-after-app/app/edge/provided-request-context/page.js
@@ -0,0 +1 @@
+export { default } from '../../nodejs/provided-request-context/page'
diff --git a/test/e2e/app-dir/next-after-app/app/edge/route/route.js b/test/e2e/app-dir/next-after-app/app/edge/route/route.js
@@ -0,0 +1,4 @@
+export { GET } from '../../nodejs/route/route'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
diff --git a/test/e2e/app-dir/next-after-app/app/interrupted/calls-redirect/page.js b/test/e2e/app-dir/next-after-app/app/interrupted/calls-redirect/page.js
diff --git a/...r/next-after-app/app/[id]/dynamic/page.js → ...after-app/app/nodejs/[id]/dynamic/page.js b/...r/next-after-app/app/[id]/dynamic/page.js → ...after-app/app/nodejs/[id]/dynamic/page.js
@@ -1,6 +1,6 @@
 import { unstable_after as after } from 'next/server'
 import { cache } from 'react'
-import { cliLog } from '../../../utils/log'
+import { cliLog } from '../../../../utils/log'
 import { headers } from 'next/headers'
 
 const thing = cache(() => Symbol('cache me please'))

diff --git a/...app-dir/next-after-app/app/[id]/layout.js → .../next-after-app/app/nodejs/[id]/layout.js b/...app-dir/next-after-app/app/[id]/layout.js → .../next-after-app/app/nodejs/[id]/layout.js
@@ -1,5 +1,5 @@
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../utils/log'
+import { cliLog } from '../../../utils/log'
 
 export default function Layout({ children }) {
   after(async () => {

diff --git a/...fter-app/app/[id]/setting-cookies/page.js → ...p/app/nodejs/[id]/setting-cookies/page.js b/...fter-app/app/[id]/setting-cookies/page.js → ...p/app/nodejs/[id]/setting-cookies/page.js
diff --git a/...xt-after-app/app/[id]/with-action/page.js → ...r-app/app/nodejs/[id]/with-action/page.js b/...xt-after-app/app/[id]/with-action/page.js → ...r-app/app/nodejs/[id]/with-action/page.js
@@ -1,6 +1,6 @@
 import { unstable_after as after } from 'next/server'
 import { cache } from 'react'
-import { cliLog } from '../../../utils/log'
+import { cliLog } from '../../../../utils/log'
 import { headers } from 'next/headers'
 
 const thing = cache(() => Symbol('cache me please'))

diff --git a/...-after-app/app/[id]/with-metadata/page.js → ...app/app/nodejs/[id]/with-metadata/page.js b/...-after-app/app/[id]/with-metadata/page.js → ...app/app/nodejs/[id]/with-metadata/page.js
@@ -1,5 +1,5 @@
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../../utils/log'
+import { cliLog } from '../../../../utils/log'
 
 export function generateMetadata({ params }) {
   after(() => {

diff --git a/.../app-dir/next-after-app/app/delay/page.js → ...r/next-after-app/app/nodejs/delay/page.js b/.../app-dir/next-after-app/app/delay/page.js → ...r/next-after-app/app/nodejs/delay/page.js
@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../utils/log'
+import { cliLog } from '../../../utils/log'
 
 export const dynamic = 'force-dynamic'
 

diff --git a/...p/app/interrupted/calls-not-found/page.js → ...odejs/interrupted/calls-not-found/page.js b/...p/app/interrupted/calls-not-found/page.js → ...odejs/interrupted/calls-not-found/page.js
@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation'
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../../utils/log'
+import { cliLog } from '../../../../utils/log'
 
 export default function Page() {
   after(() => {

diff --git a/test/e2e/app-dir/next-after-app/app/nodejs/interrupted/calls-redirect/page.js b/test/e2e/app-dir/next-after-app/app/nodejs/interrupted/calls-redirect/page.js
@@ -0,0 +1,19 @@
+import { unstable_after as after } from 'next/server'
+import { redirect } from 'next/navigation'
+import { cliLog } from '../../../../utils/log'
+
+// NOTE: this page is forked in /edge
+
+export function createPage(pathPrefix) {
+  return function Page() {
+    after(() => {
+      cliLog({
+        source: '[page] /interrupted/calls-redirect',
+      })
+    })
+
+    redirect(pathPrefix + '/interrupted/redirect-target')
+  }
+}
+
+export default createPage('/nodejs')
diff --git a/...p/app/interrupted/redirect-target/page.js → ...odejs/interrupted/redirect-target/page.js b/...p/app/interrupted/redirect-target/page.js → ...odejs/interrupted/redirect-target/page.js
@@ -1,5 +1,5 @@
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../../utils/log'
+import { cliLog } from '../../../../utils/log'
 
 export default function Page() {
   after(() => {

diff --git a/...-app/app/interrupted/throws-error/page.js → ...p/nodejs/interrupted/throws-error/page.js b/...-app/app/interrupted/throws-error/page.js → ...p/nodejs/interrupted/throws-error/page.js
@@ -1,5 +1,5 @@
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../../utils/log'
+import { cliLog } from '../../../../utils/log'
 
 export default function Page() {
   after(() => {

diff --git a/.../e2e/app-dir/next-after-app/app/layout.js → ...p-dir/next-after-app/app/nodejs/layout.js b/.../e2e/app-dir/next-after-app/app/layout.js → ...p-dir/next-after-app/app/nodejs/layout.js
@@ -1,5 +1,4 @@
-// (patched in tests)
-// export const runtime = 'REPLACE_ME'
+export const runtime = 'nodejs'
 
 export default function AppLayout({ children }) {
   return (

diff --git a/...after-app/app/middleware/redirect/page.js → ...pp/app/nodejs/middleware/redirect/page.js b/...after-app/app/middleware/redirect/page.js → ...pp/app/nodejs/middleware/redirect/page.js
diff --git a/...r/next-after-app/app/nested-after/page.js → ...after-app/app/nodejs/nested-after/page.js b/...r/next-after-app/app/nested-after/page.js → ...after-app/app/nodejs/nested-after/page.js
@@ -1,6 +1,6 @@
 import { unstable_after as after } from 'next/server'
 import { cache } from 'react'
-import { cliLog } from '../../utils/log'
+import { cliLog } from '../../../utils/log'
 import { headers } from 'next/headers'
 
 const thing = cache(() => Symbol('cache me please'))

diff --git a/...-app/app/provided-request-context/page.js → ...p/nodejs/provided-request-context/page.js b/...-app/app/provided-request-context/page.js → ...p/nodejs/provided-request-context/page.js
@@ -1,5 +1,5 @@
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../utils/log'
+import { cliLog } from '../../../utils/log'
 
 export default function Page() {
   after(() => {

diff --git a/...app-dir/next-after-app/app/route/route.js → .../next-after-app/app/nodejs/route/route.js b/...app-dir/next-after-app/app/route/route.js → .../next-after-app/app/nodejs/route/route.js
@@ -1,9 +1,7 @@
 import { unstable_after as after } from 'next/server'
-import { cliLog } from '../../utils/log'
-
-// (patched in tests)
-// export const runtime = 'REPLACE_ME'
+import { cliLog } from '../../../utils/log'
 
+export const runtime = 'nodejs'
 export const dynamic = 'force-dynamic'
 
 export async function GET() {