test: move middleware-i18n-exluded-path to test variants

Author: pieh

tests/e2e/edge-middleware.test.ts

@@ -12,6 +12,7 @@ type ExtendedFixtures = {
   edgeOrNodeMiddleware: Fixture
   edgeOrNodeMiddlewarePages: Fixture
   edgeOrNodeMiddlewareI18n: Fixture
+  edgeOrNodeMiddlewareI18nExcludedPaths: Fixture
 }
 
 for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
@@ -43,6 +44,14 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
           scope: 'worker',
         },
       ],
+      edgeOrNodeMiddlewareI18nExcludedPaths: [
+        async ({ middlewareI18nExcludedPaths }, use) => {
+          await use(middlewareI18nExcludedPaths)
+        },
+        {
+          scope: 'worker',
+        },
+      ],
     }),
   },
   hasNodeMiddlewareSupport()
@@ -74,6 +83,14 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
               scope: 'worker',
             },
           ],
+          edgeOrNodeMiddlewareI18nExcludedPaths: [
+            async ({ middlewareI18nExcludedPathsNode }, use) => {
+              await use(middlewareI18nExcludedPathsNode)
+            },
+            {
+              scope: 'worker',
+            },
+          ],
         }),
       }
     : undefined,
@@ -297,154 +314,161 @@ for (const { expectedRuntime, label, testWithSwitchableMiddlewareRuntime } of [
       })
     })
 
-    if (expectedRuntime !== 'node') {
-      // those tests use `fetch` instead of `page.goto` intentionally to avoid potential client rendering
-      // hiding any potential edge/server issues
-      test.describe('Middleware with i18n and excluded paths', () => {
-        const DEFAULT_LOCALE = 'en'
-
-        /** helper function to extract JSON data from page rendering data with `<pre>{JSON.stringify(data)}</pre>` */
-        function extractDataFromHtml(html: string): Record<string, any> {
-          const match = html.match(/<pre>(?<rawInput>[^<]+)<\/pre>/)
-          if (!match || !match.groups?.rawInput) {
-            console.error('<pre> not found in html input', {
-              html,
-            })
-            throw new Error('Failed to extract data from HTML')
-          }
-
-          const { rawInput } = match.groups
-          const unescapedInput = rawInput.replaceAll('&quot;', '"')
-          try {
-            return JSON.parse(unescapedInput)
-          } catch (originalError) {
-            console.error('Failed to parse JSON', {
-              originalError,
-              rawInput,
-              unescapedInput,
-            })
-          }
+    // those tests use `fetch` instead of `page.goto` intentionally to avoid potential client rendering
+    // hiding any potential edge/server issues
+    test.describe('Middleware with i18n and excluded paths', () => {
+      const DEFAULT_LOCALE = 'en'
+
+      /** helper function to extract JSON data from page rendering data with `<pre>{JSON.stringify(data)}</pre>` */
+      function extractDataFromHtml(html: string): Record<string, any> {
+        const match = html.match(/<pre>(?<rawInput>[^<]+)<\/pre>/)
+        if (!match || !match.groups?.rawInput) {
+          console.error('<pre> not found in html input', {
+            html,
+          })
           throw new Error('Failed to extract data from HTML')
         }
 
-        // those tests hit paths ending with `/json` which has special handling in middleware
-        // to return JSON response from middleware itself
-        test.describe('Middleware response path', () => {
-          test('should match on non-localized not excluded page path', async ({
-            middlewareI18nExcludedPaths,
-          }) => {
-            const response = await fetch(`${middlewareI18nExcludedPaths.url}/json`)
+        const { rawInput } = match.groups
+        const unescapedInput = rawInput.replaceAll('&quot;', '"')
+        try {
+          return JSON.parse(unescapedInput)
+        } catch (originalError) {
+          console.error('Failed to parse JSON', {
+            originalError,
+            rawInput,
+            unescapedInput,
+          })
+        }
+        throw new Error('Failed to extract data from HTML')
+      }
 
-            expect(response.headers.get('x-test-used-middleware')).toBe('true')
-            expect(response.status).toBe(200)
+      // those tests hit paths ending with `/json` which has special handling in middleware
+      // to return JSON response from middleware itself
+      test.describe('Middleware response path', () => {
+        test('should match on non-localized not excluded page path', async ({
+          edgeOrNodeMiddlewareI18nExcludedPaths,
+        }) => {
+          const response = await fetch(`${edgeOrNodeMiddlewareI18nExcludedPaths.url}/json`)
 
-            const { nextUrlPathname, nextUrlLocale } = await response.json()
+          expect(response.headers.get('x-test-used-middleware')).toBe('true')
+          expect(response.headers.get('x-runtime')).toEqual(expectedRuntime)
+          expect(response.status).toBe(200)
 
-            expect(nextUrlPathname).toBe('/json')
-            expect(nextUrlLocale).toBe(DEFAULT_LOCALE)
-          })
+          const { nextUrlPathname, nextUrlLocale } = await response.json()
+
+          expect(nextUrlPathname).toBe('/json')
+          expect(nextUrlLocale).toBe(DEFAULT_LOCALE)
+        })
 
-          test('should match on localized not excluded page path', async ({
-            middlewareI18nExcludedPaths,
-          }) => {
-            const response = await fetch(`${middlewareI18nExcludedPaths.url}/fr/json`)
+        test('should match on localized not excluded page path', async ({
+          edgeOrNodeMiddlewareI18nExcludedPaths,
+        }) => {
+          const response = await fetch(`${edgeOrNodeMiddlewareI18nExcludedPaths.url}/fr/json`)
 
-            expect(response.headers.get('x-test-used-middleware')).toBe('true')
-            expect(response.status).toBe(200)
+          expect(response.headers.get('x-test-used-middleware')).toBe('true')
+          expect(response.headers.get('x-runtime')).toEqual(expectedRuntime)
+          expect(response.status).toBe(200)
 
-            const { nextUrlPathname, nextUrlLocale } = await response.json()
+          const { nextUrlPathname, nextUrlLocale } = await response.json()
 
-            expect(nextUrlPathname).toBe('/json')
-            expect(nextUrlLocale).toBe('fr')
-          })
+          expect(nextUrlPathname).toBe('/json')
+          expect(nextUrlLocale).toBe('fr')
         })
+      })
 
-        // those tests hit paths that don't end with `/json` while still satisfying middleware matcher
-        // so middleware should pass them through to origin
-        test.describe('Middleware passthrough', () => {
-          test('should match on non-localized not excluded page path', async ({
-            middlewareI18nExcludedPaths,
-          }) => {
-            const response = await fetch(`${middlewareI18nExcludedPaths.url}/html`)
+      // those tests hit paths that don't end with `/json` while still satisfying middleware matcher
+      // so middleware should pass them through to origin
+      test.describe('Middleware passthrough', () => {
+        test('should match on non-localized not excluded page path', async ({
+          edgeOrNodeMiddlewareI18nExcludedPaths,
+        }) => {
+          const response = await fetch(`${edgeOrNodeMiddlewareI18nExcludedPaths.url}/html`)
 
-            expect(response.headers.get('x-test-used-middleware')).toBe('true')
-            expect(response.status).toBe(200)
-            expect(response.headers.get('content-type')).toMatch(/text\/html/)
+          expect(response.headers.get('x-test-used-middleware')).toBe('true')
+          expect(response.headers.get('x-runtime')).toEqual(expectedRuntime)
+          expect(response.status).toBe(200)
+          expect(response.headers.get('content-type')).toMatch(/text\/html/)
 
-            const html = await response.text()
-            const { locale, params } = extractDataFromHtml(html)
+          const html = await response.text()
+          const { locale, params } = extractDataFromHtml(html)
 
-            expect(params).toMatchObject({ catchall: ['html'] })
-            expect(locale).toBe(DEFAULT_LOCALE)
-          })
+          expect(params).toMatchObject({ catchall: ['html'] })
+          expect(locale).toBe(DEFAULT_LOCALE)
+        })
 
-          test('should match on localized not excluded page path', async ({
-            middlewareI18nExcludedPaths,
-          }) => {
-            const response = await fetch(`${middlewareI18nExcludedPaths.url}/fr/html`)
+        test('should match on localized not excluded page path', async ({
+          edgeOrNodeMiddlewareI18nExcludedPaths,
+        }) => {
+          const response = await fetch(`${edgeOrNodeMiddlewareI18nExcludedPaths.url}/fr/html`)
 
-            expect(response.headers.get('x-test-used-middleware')).toBe('true')
-            expect(response.status).toBe(200)
-            expect(response.headers.get('content-type')).toMatch(/text\/html/)
+          expect(response.headers.get('x-test-used-middleware')).toBe('true')
+          expect(response.headers.get('x-runtime')).toEqual(expectedRuntime)
+          expect(response.status).toBe(200)
+          expect(response.headers.get('content-type')).toMatch(/text\/html/)
 
-            const html = await response.text()
-            const { locale, params } = extractDataFromHtml(html)
+          const html = await response.text()
+          const { locale, params } = extractDataFromHtml(html)
 
-            expect(params).toMatchObject({ catchall: ['html'] })
-            expect(locale).toBe('fr')
-          })
+          expect(params).toMatchObject({ catchall: ['html'] })
+          expect(locale).toBe('fr')
         })
+      })
 
-        // those tests hit paths that don't satisfy middleware matcher, so should go directly to origin
-        // without going through middleware
-        test.describe('Middleware skipping (paths not satisfying middleware matcher)', () => {
-          test('should NOT match on non-localized excluded API path', async ({
-            middlewareI18nExcludedPaths,
-          }) => {
-            const response = await fetch(`${middlewareI18nExcludedPaths.url}/api/html`)
+      // those tests hit paths that don't satisfy middleware matcher, so should go directly to origin
+      // without going through middleware
+      test.describe('Middleware skipping (paths not satisfying middleware matcher)', () => {
+        test('should NOT match on non-localized excluded API path', async ({
+          edgeOrNodeMiddlewareI18nExcludedPaths,
+        }) => {
+          const response = await fetch(`${edgeOrNodeMiddlewareI18nExcludedPaths.url}/api/html`)
 
-            expect(response.headers.get('x-test-used-middleware')).not.toBe('true')
-            expect(response.status).toBe(200)
+          expect(response.headers.get('x-test-used-middleware')).not.toBe('true')
+          expect(response.headers.get('x-runtime')).toEqual(expectedRuntime)
+          expect(response.status).toBe(200)
 
-            const { params } = await response.json()
+          const { params } = await response.json()
 
-            expect(params).toMatchObject({ catchall: ['html'] })
-          })
+          expect(params).toMatchObject({ catchall: ['html'] })
+        })
 
-          test('should NOT match on non-localized excluded page path', async ({
-            middlewareI18nExcludedPaths,
-          }) => {
-            const response = await fetch(`${middlewareI18nExcludedPaths.url}/excluded`)
+        test('should NOT match on non-localized excluded page path', async ({
+          edgeOrNodeMiddlewareI18nExcludedPaths,
+        }) => {
+          const response = await fetch(`${edgeOrNodeMiddlewareI18nExcludedPaths.url}/excluded`)
 
-            expect(response.headers.get('x-test-used-middleware')).not.toBe('true')
-            expect(response.status).toBe(200)
-            expect(response.headers.get('content-type')).toMatch(/text\/html/)
+          expect(response.headers.get('x-test-used-middleware')).not.toBe('true')
+          expect(response.headers.get('x-runtime')).toEqual(expectedRuntime)
+          expect(response.status).toBe(200)
+          expect(response.headers.get('content-type')).toMatch(/text\/html/)
 
-            const html = await response.text()
-            const { locale, params } = extractDataFromHtml(html)
+          const html = await response.text()
+          const { locale, params } = extractDataFromHtml(html)
 
-            expect(params).toMatchObject({ catchall: ['excluded'] })
-            expect(locale).toBe(DEFAULT_LOCALE)
-          })
+          expect(params).toMatchObject({ catchall: ['excluded'] })
+          expect(locale).toBe(DEFAULT_LOCALE)
+        })
 
-          test('should NOT match on localized excluded page path', async ({
-            middlewareI18nExcludedPaths,
-          }) => {
-            const response = await fetch(`${middlewareI18nExcludedPaths.url}/fr/excluded`)
+        test('should NOT match on localized excluded page path', async ({
+          edgeOrNodeMiddlewareI18nExcludedPaths,
+        }) => {
+          const response = await fetch(`${edgeOrNodeMiddlewareI18nExcludedPaths.url}/fr/excluded`)
 
-            expect(response.headers.get('x-test-used-middleware')).not.toBe('true')
-            expect(response.status).toBe(200)
-            expect(response.headers.get('content-type')).toMatch(/text\/html/)
+          expect(response.headers.get('x-test-used-middleware')).not.toBe('true')
+          expect(response.headers.get('x-runtime')).toEqual(expectedRuntime)
+          expect(response.status).toBe(200)
+          expect(response.headers.get('content-type')).toMatch(/text\/html/)
 
-            const html = await response.text()
-            const { locale, params } = extractDataFromHtml(html)
+          const html = await response.text()
+          const { locale, params } = extractDataFromHtml(html)
 
-            expect(params).toMatchObject({ catchall: ['excluded'] })
-            expect(locale).toBe('fr')
-          })
+          expect(params).toMatchObject({ catchall: ['excluded'] })
+          expect(locale).toBe('fr')
         })
       })
+    })
 
+    if (expectedRuntime !== 'node') {
       test("requests with x-middleware-subrequest don't skip middleware (GHSA-f82v-jwr5-mffw)", async ({
         middlewareSubrequestVuln,
       }) => {

tests/fixtures/middleware-i18n-excluded-paths/middleware-node.ts

@@ -0,0 +1,18 @@
+export { middleware } from './middleware-shared'
+
+// matcher copied from example in https://nextjs.org/docs/pages/building-your-application/routing/middleware#matcher
+// with `excluded` segment added to exclusion
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - excluded (for testing localized routes and not just API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
+     */
+    '/((?!api|excluded|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
+  ],
+  runtime: 'nodejs',
+}

tests/fixtures/middleware-i18n-excluded-paths/middleware-shared.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+  const url = request.nextUrl
+
+  // if path ends with /json we create response in middleware, otherwise we pass it through
+  // to next server to get page or api response from it
+  const response = url.pathname.includes('/json')
+    ? NextResponse.json({
+        requestUrlPathname: new URL(request.url).pathname,
+        nextUrlPathname: request.nextUrl.pathname,
+        nextUrlLocale: request.nextUrl.locale,
+      })
+    : NextResponse.next()
+
+  response.headers.set('x-test-used-middleware', 'true')
+  // report Next.js Middleware Runtime (not the execution runtime, but target runtime)
+  // @ts-expect-error EdgeRuntime global not declared
+  response.headers.append('x-runtime', typeof EdgeRuntime !== 'undefined' ? EdgeRuntime : 'node')
+
+  return response
+}

tests/fixtures/middleware-i18n-excluded-paths/middleware.ts

@@ -1,23 +1,4 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-
-export async function middleware(request: NextRequest) {
-  const url = request.nextUrl
-
-  // if path ends with /json we create response in middleware, otherwise we pass it through
-  // to next server to get page or api response from it
-  const response = url.pathname.includes('/json')
-    ? NextResponse.json({
-        requestUrlPathname: new URL(request.url).pathname,
-        nextUrlPathname: request.nextUrl.pathname,
-        nextUrlLocale: request.nextUrl.locale,
-      })
-    : NextResponse.next()
-
-  response.headers.set('x-test-used-middleware', 'true')
-
-  return response
-}
+export { middleware } from './middleware-shared'
 
 // matcher copied from example in https://nextjs.org/docs/pages/building-your-application/routing/middleware#matcher
 // with `excluded` segment added to exclusion

tests/fixtures/middleware-i18n-excluded-paths/next.config.js

@@ -1,11 +1,15 @@
 module.exports = {
   output: 'standalone',
+  distDir: process.env.NEXT_DIST_DIR ?? '.next',
   eslint: {
     ignoreDuringBuilds: true,
   },
   i18n: {
     locales: ['en', 'fr'],
     defaultLocale: 'en',
   },
+  experimental: {
+    nodeMiddleware: true,
+  },
   outputFileTracingRoot: __dirname,
 }