Add test for rewriting in middleware in app-dir (vercel#43971)

- add test for rewriting in middleware in app-dir - add test for redirect - add tests for router.push - add test for rewrites in config.next.js - add test for redirects in config.next.js - add test for catchall rewrite in config.next.js Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
jankaifer · Dec 19, 2022 · 907bde2 · 907bde2
1 parent 38c8a52
commit 907bde2
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 0 deletions.
diff --git a/test/e2e/app-dir/rewrites-redirects/app/[...params]/page.tsx b/test/e2e/app-dir/rewrites-redirects/app/[...params]/page.tsx
@@ -0,0 +1,7 @@
+export default function Page({ params: { params } }) {
+  return (
+    <div id="page" className={`page_${params.join('_')}`}>
+      {params.join('/')}
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/rewrites-redirects/app/layout.tsx b/test/e2e/app-dir/rewrites-redirects/app/layout.tsx
@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head></head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/rewrites-redirects/app/page.tsx b/test/e2e/app-dir/rewrites-redirects/app/page.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+const Test = ({ page, href }: { page: string; href?: string }) => {
+  const router = useRouter()
+  href ??= `/${page}-before`
+
+  return (
+    <>
+      <Link id={`link-${page}`} href={href}>
+        Link to /{page}-before
+      </Link>
+      <button id={`button-${page}`} onClick={() => router.push(href)}>
+        Button to /{page}-before
+      </button>
+    </>
+  )
+}
+
+export default function Page() {
+  return (
+    <>
+      <Test page="middleware-rewrite" />
+      <Test page="middleware-redirect" />
+      <Test page="config-rewrite" />
+      <Test page="config-redirect" />
+      <Test
+        page="config-redirect-catchall"
+        href="/config-redirect-catchall-before/thing"
+      />
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/rewrites-redirects/middleware.ts b/test/e2e/app-dir/rewrites-redirects/middleware.ts
@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  if (request.nextUrl.pathname.startsWith('/middleware-rewrite-before')) {
+    return NextResponse.rewrite(
+      new URL('/middleware-rewrite-after', request.url)
+    )
+  }
+
+  if (request.nextUrl.pathname.startsWith('/middleware-redirect-before')) {
+    return NextResponse.redirect(
+      new URL('/middleware-redirect-after', request.url)
+    )
+  }
+}
diff --git a/test/e2e/app-dir/rewrites-redirects/next.config.js b/test/e2e/app-dir/rewrites-redirects/next.config.js
@@ -0,0 +1,28 @@
+module.exports = {
+  reactStrictMode: true,
+  experimental: {
+    appDir: true,
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/config-rewrite-before',
+        destination: '/config-rewrite-after',
+      },
+    ]
+  },
+  async redirects() {
+    return [
+      {
+        source: '/config-redirect-before',
+        destination: '/config-redirect-after',
+        permanent: true,
+      },
+      {
+        source: '/config-redirect-catchall-before/:path*',
+        destination: '/config-redirect-catchall-after/:path*',
+        permanent: true,
+      },
+    ]
+  },
+}
diff --git a/test/e2e/app-dir/rewrites-redirects/rewrites-redirects.test.ts b/test/e2e/app-dir/rewrites-redirects/rewrites-redirects.test.ts
@@ -0,0 +1,71 @@
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+  'redirects and rewrites',
+  {
+    files: __dirname,
+    dependencies: {
+      react: 'latest',
+      'react-dom': 'latest',
+      typescript: 'latest',
+      '@types/react': 'latest',
+      '@types/node': 'latest',
+    },
+  },
+  ({ next }) => {
+    /**
+     * All test will use a link/button to navigate to '/*-before' which should be redirected by correct redirect/rewrite to '/*-after'
+     */
+    describe.each(['link', 'button'])('navigation using %s', (testType) => {
+      it('should rewrite from middleware correctly', async () => {
+        const browser = await next.browser('/')
+        await browser
+          .elementById(`${testType}-middleware-rewrite`)
+          .click()
+          .waitForElementByCss('.page_middleware-rewrite-after')
+        const url = new URL(await browser.url())
+        expect(url.pathname).toEndWith('-before')
+      })
+
+      it('should redirect from middleware correctly', async () => {
+        const browser = await next.browser('/')
+        await browser
+          .elementById(`${testType}-middleware-redirect`)
+          .click()
+          .waitForElementByCss('.page_middleware-redirect-after')
+        const url = new URL(await browser.url())
+        expect(url.pathname).toEndWith('-after')
+      })
+
+      it('should rewrite from next.config.js correctly', async () => {
+        const browser = await next.browser('/')
+        await browser
+          .elementById(`${testType}-config-rewrite`)
+          .click()
+          .waitForElementByCss('.page_config-rewrite-after')
+        const url = new URL(await browser.url())
+        expect(url.pathname).toEndWith('-before')
+      })
+
+      it('should redirect from next.config.js correctly', async () => {
+        const browser = await next.browser('/')
+        await browser
+          .elementById(`${testType}-config-redirect`)
+          .click()
+          .waitForElementByCss('.page_config-redirect-after')
+        const url = new URL(await browser.url())
+        expect(url.pathname).toEndWith('-after')
+      })
+
+      it('should redirect using catchall from next.config.js correctly', async () => {
+        const browser = await next.browser('/')
+        await browser
+          .elementById(`${testType}-config-redirect-catchall`)
+          .click()
+          .waitForElementByCss('.page_config-redirect-catchall-after_thing')
+        const url = new URL(await browser.url())
+        expect(url.pathname).toEndWith('-after/thing')
+      })
+    })
+  }
+)