test: add locale assertions for middleware handling

Author: pieh

tests/e2e/edge-middleware.test.ts

@@ -63,11 +63,13 @@ test.describe('json data', () => {
       describeLabel: 'NextResponse.next() -> getServerSideProps page',
       selector: 'NextResponse.next()#getServerSideProps',
       jsonPathMatcher: '/link/next-getserversideprops.json',
+      assertLocale: true,
     },
     {
       describeLabel: 'NextResponse.next() -> getStaticProps page',
       selector: 'NextResponse.next()#getStaticProps',
       jsonPathMatcher: '/link/next-getstaticprops.json',
+      assertLocale: true,
     },
     {
       describeLabel: 'NextResponse.next() -> fully static page',
@@ -78,11 +80,13 @@ test.describe('json data', () => {
       describeLabel: 'NextResponse.rewrite() -> getServerSideProps page',
       selector: 'NextResponse.rewrite()#getServerSideProps',
       jsonPathMatcher: '/link/rewrite-me-getserversideprops.json',
+      assertLocale: true,
     },
     {
       describeLabel: 'NextResponse.rewrite() -> getStaticProps page',
       selector: 'NextResponse.rewrite()#getStaticProps',
       jsonPathMatcher: '/link/rewrite-me-getstaticprops.json',
+      assertLocale: true,
     },
   ]
 
@@ -144,10 +148,22 @@ test.describe('json data', () => {
   test.describe('with 18n', () => {
     for (const testConfig of testConfigs) {
       test.describe(testConfig.describeLabel, () => {
-        for (const { localeLabel, pageWithLinksPathname } of [
-          { localeLabel: 'implicit default locale', pageWithLinksPathname: '/link' },
-          { localeLabel: 'explicit default locale', pageWithLinksPathname: '/en/link' },
-          { localeLabel: 'explicit non-default locale', pageWithLinksPathname: '/fr/link' },
+        for (const { localeLabel, pageWithLinksPathname, expectedLocale } of [
+          {
+            localeLabel: 'implicit default locale',
+            pageWithLinksPathname: '/link',
+            expectedLocale: 'en',
+          },
+          {
+            localeLabel: 'explicit default locale',
+            pageWithLinksPathname: '/en/link',
+            expectedLocale: 'en',
+          },
+          {
+            localeLabel: 'explicit non-default locale',
+            pageWithLinksPathname: '/fr/link',
+            expectedLocale: 'fr',
+          },
         ]) {
           test.describe(localeLabel, () => {
             test('json data fetch', async ({ middlewareI18n, page }) => {
@@ -189,6 +205,10 @@ test.describe('json data', () => {
 
               // we expect client navigation to work without browser reload
               expect(browserNavigationWorked).toBe(true)
+
+              if (testConfig.assertLocale) {
+                await expect(page.getByTestId('current-locale')).toHaveText(expectedLocale)
+              }
             })
           })
         }

tests/fixtures/middleware-i18n/pages/link/next-getserversideprops.js

@@ -1,15 +1,24 @@
-export default function Page() {
+export default function Page({ locale, locales }) {
   return (
     <div data-page="NextResponse.next()#getServerSideProps">
       <h1>
         <code>getServerSideProps</code> page
       </h1>
+      <dt>Current locale:</dt>
+      <dd data-testid="current-locale">{locale ?? 'N/A'}</dd>
+      <dt>All locales:</dt>
+      <dd data-testid="all-locales">{locales ? locales.join(',') : 'N/A'}</dd>
     </div>
   )
 }
 
-export function getServerSideProps() {
+/** @type {import('next').GetServerSideProps} */
+export function getServerSideProps({ locale, locales }) {
+  console.log('NextResponse.next()#getServerSideProps', { locale, locales })
   return {
-    props: {},
+    props: {
+      locale,
+      locales,
+    },
   }
 }

tests/fixtures/middleware-i18n/pages/link/next-getstaticprops.js

@@ -1,15 +1,25 @@
-export default function Page() {
+export default function Page({ locale, locales }) {
   return (
     <div data-page="NextResponse.next()#getStaticProps">
       <h1>
         <code>getStaticProps</code> page
       </h1>
+      <dt>Current locale:</dt>
+      <dd data-testid="current-locale">{locale ?? 'N/A'}</dd>
+      <dt>All locales:</dt>
+      <dd data-testid="all-locales">{locales ? locales.join(',') : 'N/A'}</dd>
     </div>
   )
 }
 
-export function getStaticProps() {
+/** @type {import('next').GetStaticProps} */
+export function getStaticProps({ locale, locales }) {
+  console.log('NextResponse.next()#getStaticProps', { locale, locales })
   return {
-    props: {},
+    props: {
+      locale,
+      locales,
+    },
+    revalidate: 5,
   }
 }

tests/fixtures/middleware-i18n/pages/link/rewrite-target-getserversideprops.js

@@ -1,15 +1,24 @@
-export default function Page() {
+export default function Page({ locale, locales }) {
   return (
     <div data-page="NextResponse.rewrite()#getServerSideProps">
       <h1>
         <code>getServerSideProps</code> page
       </h1>
+      <dt>Current locale:</dt>
+      <dd data-testid="current-locale">{locale ?? 'N/A'}</dd>
+      <dt>All locales:</dt>
+      <dd data-testid="all-locales">{locales ? locales.join(',') : 'N/A'}</dd>
     </div>
   )
 }
 
-export function getServerSideProps() {
+/** @type {import('next').GetServerSideProps} */
+export function getServerSideProps({ locale, locales }) {
+  console.log('NextResponse.rewrite()#getServerSideProps', { locale, locales })
   return {
-    props: {},
+    props: {
+      locale,
+      locales,
+    },
   }
 }

tests/fixtures/middleware-i18n/pages/link/rewrite-target-getstaticprops.js

@@ -1,15 +1,25 @@
-export default function Page() {
+export default function Page({ locale, locales }) {
   return (
     <div data-page="NextResponse.rewrite()#getStaticProps">
       <h1>
         <code>getStaticProps</code> page
       </h1>
+      <dt>Current locale:</dt>
+      <dd data-testid="current-locale">{locale ?? 'N/A'}</dd>
+      <dt>All locales:</dt>
+      <dd data-testid="all-locales">{locales ? locales.join(',') : 'N/A'}</dd>
     </div>
   )
 }
 
-export function getStaticProps() {
+/** @type {import('next').GetStaticProps} */
+export function getStaticProps({ locale, locales }) {
+  console.log('NextResponse.rewrite()#getStaticProps', { locale, locales })
   return {
-    props: {},
+    props: {
+      locale,
+      locales,
+    },
+    revalidate: 5,
   }
 }