Add test to assert on current build output

Author: unstubbable

test/production/app-dir/cli-build-output/cli-build-output.test.ts

@@ -0,0 +1,118 @@
+import { nextTestSetup } from 'e2e-utils'
+import path from 'path'
+
+describe('cli-build-output', () => {
+  describe('with mixed static and dynamic pages and app router routes', () => {
+    const { next } = nextTestSetup({
+      files: path.join(__dirname, 'fixtures/mixed'),
+      skipStart: true,
+    })
+
+    beforeAll(() => next.build())
+
+    it('should show info about prerendered and dynamic routes in a tree view', async () => {
+      // TODO: Show cache info (revalidate/expire) for app router, and use the
+      // same for pages router instead of the ISR addendum.
+
+      // TODO: Fix double-listing of the /ppr/[slug] fallback.
+
+      expect(getTreeView(next.cliOutput)).toMatchInlineSnapshot(`
+       "Route (app)                               Size     First Load JS
+       ┌ ○ /_not-found                           ·····           ······
+       ├ ƒ /api                                  ·····           ······
+       ├ ○ /api/force-static                     ·····           ······
+       ├ ○ /app-static                           ·····           ······
+       ├ ○ /cache-life                           ·····           ······
+       ├ ƒ /dynamic                              ·····           ······
+       ├ ◐ /ppr/[slug]                           ·····           ······
+       ├   ├ /ppr/[slug]
+       ├   ├ /ppr/[slug]
+       ├   ├ /ppr/days
+       ├   └ /ppr/weeks
+       └ ○ /revalidate                           ·····           ······
+       + First Load JS shared by all             ······
+         ├ chunks/main-app-················.js   ······
+         └ other shared chunks (total)           ·······
+
+       Route (pages)                             Size     First Load JS
+       ┌ ƒ /api/hello                            ···            ·······
+       ├ ● /gsp-revalidate (ISR: 300 Seconds)    ·····          ·······
+       ├ ƒ /gssp                                 ·····          ·······
+       └ ○ /static                               ·····          ·······
+       + First Load JS shared by all             ·······
+         ├ chunks/framework-················.js  ·······
+         ├ chunks/main-················.js       ·······
+         └ other shared chunks (total)           ·······
+
+       ○  (Static)             prerendered as static content
+       ●  (SSG)                prerendered as static HTML (uses generateStaticParams)
+          (ISR)                incremental static regeneration (uses revalidate in generateStaticParams)
+       ◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
+       ƒ  (Dynamic)            server-rendered on demand"
+      `)
+    })
+  })
+
+  describe('with only a few static routes', () => {
+    const { next } = nextTestSetup({
+      files: path.join(__dirname, 'fixtures/minimal-static'),
+      skipStart: true,
+    })
+
+    beforeAll(() => next.build())
+
+    it('should show info about prerendered routes in a compact tree view', async () => {
+      expect(getTreeView(next.cliOutput)).toMatchInlineSnapshot(`
+       "Route (app)                               Size     First Load JS
+       ┌ ○ /                                     ·····           ······
+       └ ○ /_not-found                           ·····           ······
+       + First Load JS shared by all             ······
+         ├ chunks/main-app-················.js   ······
+         └ other shared chunks (total)           ·······
+
+       Route (pages)                             Size     First Load JS
+       ─ ○ /static                               ·····          ·······
+       + First Load JS shared by all             ·······
+         ├ chunks/framework-················.js  ·······
+         ├ chunks/main-················.js       ·······
+         └ other shared chunks (total)           ·······
+
+       ○  (Static)  prerendered as static content"
+      `)
+    })
+  })
+})
+
+function getTreeView(cliOutput: string): string {
+  let foundBuildTracesLine = false
+  const lines: string[] = []
+
+  for (const line of cliOutput.split('\n')) {
+    if (foundBuildTracesLine) {
+      lines.push(normalizeCliOutputLine(line))
+    }
+
+    foundBuildTracesLine ||= line.includes('Collecting build traces')
+  }
+
+  while (lines.at(0) === '') lines.shift()
+  while (lines.at(-1) === '') lines.pop()
+
+  return lines.join('\n')
+}
+
+function normalizeCliOutputLine(line: string): string {
+  // Replace file sizes with a placeholder.
+  line = line.replace(
+    /\b\d+(?:\.\d+)?\s*(B|kB|MB|GB|TB|PB|EB|ZB|YB)\b/g,
+    (match) => '·'.repeat(match.length)
+  )
+
+  // Replace file hashes with a placeholder.
+  line = line.replace(
+    /-([a-f0-9]{8,})(\.js)/g,
+    (match, p1, p2) => '-' + '·'.repeat(p1.length) + p2
+  )
+
+  return line
+}

test/production/app-dir/cli-build-output/fixtures/minimal-static/app/layout.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/production/app-dir/cli-build-output/fixtures/minimal-static/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}

test/production/app-dir/cli-build-output/fixtures/minimal-static/next.config.js

@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig

test/production/app-dir/cli-build-output/fixtures/minimal-static/pages/static.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/api/force-static/route.ts

@@ -0,0 +1,5 @@
+export const dynamic = 'force-static'
+
+export async function GET() {
+  return Response.json({ message: 'hello world' })
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/api/route.ts

@@ -0,0 +1,3 @@
+export async function GET() {
+  return Response.json({ message: 'hello world' })
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/app-static/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/cache-life/page.tsx

@@ -0,0 +1,9 @@
+'use cache'
+
+import { unstable_cacheLife } from 'next/cache'
+
+export default async function Page() {
+  unstable_cacheLife('weeks')
+
+  return <p>hello world</p>
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/dynamic/page.tsx

@@ -0,0 +1,7 @@
+import { headers } from 'next/headers'
+
+export default async function Page() {
+  await headers()
+
+  return <p>hello world</p>
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/layout.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/ppr/[slug]/page.tsx

@@ -0,0 +1,25 @@
+import { unstable_cacheLife } from 'next/cache'
+
+type CacheLife = Parameters<typeof unstable_cacheLife>[0]
+
+async function getCachedValue(cacheLife: CacheLife) {
+  'use cache'
+
+  unstable_cacheLife(cacheLife)
+
+  return Math.random()
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: CacheLife }>
+}) {
+  const { slug } = await params
+
+  return <p>hello world {await getCachedValue(slug)}</p>
+}
+
+export function generateStaticParams() {
+  return [{ slug: 'days' }, { slug: 'weeks' }]
+}

test/production/app-dir/cli-build-output/fixtures/mixed/app/revalidate/page.tsx

@@ -0,0 +1,5 @@
+export const revalidate = 900
+
+export default function Page() {
+  return <p>hello world</p>
+}

test/production/app-dir/cli-build-output/fixtures/mixed/next.config.js

@@ -0,0 +1,11 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    useCache: true,
+    ppr: true,
+  },
+}
+
+module.exports = nextConfig

test/production/app-dir/cli-build-output/fixtures/mixed/pages/api/hello.ts

@@ -0,0 +1,5 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({ message: 'hello world' })
+}

test/production/app-dir/cli-build-output/fixtures/mixed/pages/gsp-revalidate.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return <p>hello world</p>
+}
+
+export async function getStaticProps() {
+  return { props: {}, revalidate: 300 }
+}

test/production/app-dir/cli-build-output/fixtures/mixed/pages/gssp.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return <p>hello world</p>
+}
+
+export async function getServerSideProps() {
+  return { props: {} }
+}

test/production/app-dir/cli-build-output/fixtures/mixed/pages/static.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}