test: adjust fixtures to await cookies(), params(), headers() (#3146)

Author: pieh

tests/fixtures/dist-dir/app/api/headers/route.js

@@ -1,14 +1,15 @@
 import { cookies } from 'next/headers'
 
 export const GET = async () => {
-  cookies().set('foo', 'foo1')
-  cookies().set('bar', 'bar1')
+  const localCookies = await cookies()
+  localCookies.set('foo', 'foo1')
+  localCookies.set('bar', 'bar1')
 
   // Key, value, options
-  cookies().set('test1', 'value1', { secure: true })
+  localCookies.set('test1', 'value1', { secure: true })
 
   // One object
-  cookies().set({
+  localCookies.set({
     name: 'test2',
     value: 'value2',
     httpOnly: true,

tests/fixtures/middleware-src/src/app/test/next/page.js

@@ -1,7 +1,7 @@
 import { headers } from 'next/headers'
 
-export default function Page() {
-  const headersList = headers()
+export default async function Page() {
+  const headersList = await headers()
   const message = headersList.get('x-hello-from-middleware-req')
 
   return (

tests/fixtures/middleware-trailing-slash/app/test/next/page.js

@@ -1,7 +1,7 @@
 import { headers } from 'next/headers'
 
-export default function Page() {
-  const headersList = headers()
+export default async function Page() {
+  const headersList = await headers()
   const message = headersList.get('x-hello-from-middleware-req')
 
   return (

tests/fixtures/middleware/app/test/next/page.js

@@ -1,7 +1,7 @@
 import { headers } from 'next/headers'
 
-export default function Page() {
-  const headersList = headers()
+export default async function Page() {
+  const headersList = await headers()
   const message = headersList.get('x-hello-from-middleware-req')
 
   return (

tests/fixtures/nx-integrated/apps/custom-dist-dir/app/api/headers/route.js

@@ -1,14 +1,15 @@
 import { cookies } from 'next/headers'
 
 export const GET = async () => {
-  cookies().set('foo', 'foo1')
-  cookies().set('bar', 'bar1')
+    const localCookies = await cookies()
+  localCookies.set('foo', 'foo1')
+  localCookies.set('bar', 'bar1')
 
   // Key, value, options
-  cookies().set('test1', 'value1', { secure: true })
+  localCookies.set('test1', 'value1', { secure: true })
 
   // One object
-  cookies().set({
+  localCookies.set({
     name: 'test2',
     value: 'value2',
     httpOnly: true,
@@ -23,4 +24,4 @@ export const GET = async () => {
       ['Set-Cookie', 'baz=baz2'],
     ],
   })
-}
+}

tests/fixtures/revalidate-fetch/app/dynamic-posts/[id]/page.js

@@ -9,7 +9,8 @@ async function getData(params) {
 }
 
 export default async function Page({ params }) {
-  const data = await getData(params)
+  const { id } = await params
+  const data = await getData({ id })
 
   return (
     <>
@@ -19,7 +20,7 @@ export default async function Page({ params }) {
         <dt>Show</dt>
         <dd data-testid="name">{data.name}</dd>
         <dt>Param</dt>
-        <dd data-testid="id">{params.id}</dd>
+        <dd data-testid="id">{id}</dd>
         <dt>Time</dt>
         <dd data-testid="date-now">{Date.now()}</dd>
         <dt>Time from fetch response</dt>

tests/fixtures/revalidate-fetch/app/posts/[id]/page.js

@@ -13,7 +13,8 @@ async function getData(params) {
 }
 
 export default async function Page({ params }) {
-  const data = await getData(params)
+  const { id } = await params
+  const data = await getData({ id })
 
   return (
     <>
@@ -24,7 +25,7 @@ export default async function Page({ params }) {
         <dt>Show</dt>
         <dd data-testid="name">{data.name}</dd>
         <dt>Param</dt>
-        <dd data-testid="id">{params.id}</dd>
+        <dd data-testid="id">{id}</dd>
         <dt>Time</dt>
         <dd data-testid="date-now">{Date.now()}</dd>
         <dt>Time from fetch response</dt>

tests/fixtures/revalidate-fetch/app/same-fetch-multiple-times/[id]/page.js

@@ -23,7 +23,8 @@ async function getData(params) {
 }
 
 export default async function Page({ params }) {
-  const data = await getData(params)
+  const { id } = await params
+  const data = await getData({ id })
 
   return (
     <>
@@ -32,7 +33,7 @@ export default async function Page({ params }) {
         <dt>Show</dt>
         <dd data-testid="name">{data.name}</dd>
         <dt>Param</dt>
-        <dd data-testid="id">{params.id}</dd>
+        <dd data-testid="id">{id}</dd>
         <dt>Time</dt>
         <dd data-testid="date-now">{Date.now()}</dd>
         <dt>Time from fetch response</dt>

tests/fixtures/server-components/app/api/static/[slug]/route.ts

@@ -4,6 +4,6 @@ export function generateStaticParams() {
   return [{ slug: 'first' }, { slug: 'second' }]
 }
 
-export const GET = (_req: NextRequest, { params }) => {
-  return NextResponse.json({ params })
+export const GET = async (_req: NextRequest, { params }) => {
+  return NextResponse.json({ params: await params })
 }

tests/fixtures/server-components/app/product/[slug]/page.js

@@ -1,12 +1,15 @@
-const Product = ({ params }) => (
-  <div>
-    <h1>Product {decodeURIComponent(params.slug)}</h1>
-    <p>
-      This page uses generateStaticParams() to prerender a Product
-      <span data-testid="date-now">{new Date().toISOString()}</span>
-    </p>
-  </div>
-)
+const Product = async ({ params }) => {
+  const { slug } = await params
+  return (
+    <div>
+      <h1>Product {decodeURIComponent(slug)}</h1>
+      <p>
+        This page uses generateStaticParams() to prerender a Product
+        <span data-testid="date-now">{new Date().toISOString()}</span>
+      </p>
+    </div>
+  )
+}
 
 export async function generateStaticParams() {
   return [
@@ -17,4 +20,6 @@ export async function generateStaticParams() {
   ]
 }
 
+export const dynamic = 'force-static'
+
 export default Product