Next.js from Pages router to App router

.github/workflows/ci.yaml

@@ -89,9 +89,9 @@ jobs:
     - name: Run Playwright tests
       run: npx playwright test
 
-    - uses: actions/upload-artifact@v3
-      if: always()
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
       with:
         name: playwright-report
         path: playwright-report/
-        retention-days: 30
+        retention-days: 8

__mocks__/jsdom-missing.js

@@ -1,6 +1,6 @@
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation(query => ({
+  value: jest.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -10,4 +10,4 @@ Object.defineProperty(window, 'matchMedia', {
     removeEventListener: jest.fn(),
     dispatchEvent: jest.fn(),
   })),
-});
+})

__tests__/home.e2e.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('H1', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByText('List of Galleries').first()).toBeVisible()
+})
+
+test('Demo gallery', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.getByTitle('demo gallery').first()).toBeVisible()
+})

__tests__/hooks/useSearchPage.tsx

@@ -0,0 +1,86 @@
+import { render, renderHook } from '@testing-library/react'
+
+import useSearch from '../../src/hooks/useSearchPage'
+
+const useRouter = jest.spyOn(require('next/router'), 'useRouter')
+
+describe('Query string', () => {
+  describe('Router not ready', () => {
+    test('Blank', () => {
+      useRouter.mockImplementation(() => ({
+        isReady: false,
+        asPath: '',
+        query: { keyword: '' },
+      }))
+      const items = [{ corpus: 'apple' }, { corpus: 'banana' }, { corpus: 'cherry' }]
+      const { result } = renderHook(() => useSearch({ items, indexedKeywords: [] }))
+
+      expect(result.current.filtered).toBe(items)
+      expect(result.current.keyword).toBe('')
+    })
+    test('First keyword partial', () => {
+      useRouter.mockImplementation(() => ({
+        isReady: false,
+        asPath: '',
+        query: { keyword: 'app' },
+      }))
+      const items = [{ corpus: 'apple' }, { corpus: 'banana' }, { corpus: 'cherry' }]
+      const { result } = renderHook(() => useSearch({ items, indexedKeywords: [] }))
+
+      expect(result.current.filtered).toBe(items)
+      expect(result.current.keyword).toBe('')
+    })
+  })
+  describe('Router ready', () => {
+    test('First keyword partial', () => {
+      const keyword = 'app'
+      useRouter.mockImplementation(() => ({ isReady: true, asPath: '', query: { keyword } }))
+      const items = [{ corpus: 'apple' }, { corpus: 'banana' }, { corpus: 'cherry' }]
+      const { result } = renderHook(() => useSearch({ items, indexedKeywords: [] }))
+
+      expect(result.current.filtered).toStrictEqual([items[0]])
+      expect(result.current.keyword).toBe(keyword)
+    })
+    test('International', () => {
+      const keyword = 'ban'
+      useRouter.mockImplementation(() => ({ isReady: true, asPath: '', query: { keyword } }))
+      const items = [{ corpus: 'apple' }, { corpus: 'bañana' }, { corpus: 'cherry' }]
+      const { result } = renderHook(() => useSearch({ items, indexedKeywords: [] }))
+
+      expect(result.current.filtered).toStrictEqual([items[1]])
+      expect(result.current.keyword).toBe(keyword)
+    })
+    test('Or operator', () => {
+      const keyword = 'ban||che'
+      useRouter.mockImplementation(() => ({ isReady: true, asPath: '', query: { keyword } }))
+      const items = [{ corpus: 'apple' }, { corpus: 'bañana' }, { corpus: 'cherry' }]
+      const { result } = renderHook(() => useSearch({ items, indexedKeywords: [] }))
+
+      expect(result.current.filtered).toStrictEqual([items[1], items[2]])
+      expect(result.current.keyword).toBe(keyword)
+    })
+    test('And operator', () => {
+      const keyword = 'ban&&che'
+      useRouter.mockImplementation(() => ({ isReady: true, asPath: '', query: { keyword } }))
+      const items = [{ corpus: 'ban' }, { corpus: 'cherished bañana' }, { corpus: 'cherry' }]
+      const { result } = renderHook(() => useSearch({ items, indexedKeywords: [] }))
+
+      expect(result.current.filtered).toStrictEqual([items[1]])
+      expect(result.current.keyword).toBe(keyword)
+    })
+  })
+})
+
+describe('Search box component', () => {
+  test('Keyword match', () => {
+    const keyword = 'app'
+    useRouter.mockImplementation(() => ({ isReady: true, asPath: '', query: { keyword } }))
+    const items = [{ corpus: 'apple' }, { corpus: 'banana' }, { corpus: 'cherry' }]
+    function Search() {
+      const { searchBox } = useSearch({ items, indexedKeywords: [] })
+      return searchBox
+    }
+    const { getByText } = render(<Search />)
+    expect(getByText(/\?keyword=app/)).toBeInTheDocument()
+  })
+})

__tests__/view/[gallery]/all.e2e.spec.ts

@@ -1,13 +1,11 @@
 import { test, expect } from '@playwright/test'
 
-const HOST_URL = 'http://localhost:3030'
-
 test('1 result', async ({ page }) => {
-  await page.goto(`${HOST_URL}/demo/all?keyword=gingerbread`)
+  await page.goto('/demo/all?keyword=gingerbread')
   await expect(page.locator('text=results 1 of 6 for "gingerbread"').first()).toBeVisible()
 })
 
 test('Mixed case', async ({ page }) => {
-  await page.goto(`${HOST_URL}/demo/all?keyword=Gingerbread`)
+  await page.goto('/demo/all?keyword=Gingerbread')
   await expect(page.locator('text=results 1 of 6 for "Gingerbread"').first()).toBeVisible()
 })

jest.config.mjs

@@ -11,7 +11,7 @@ const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   moduleDirectories: ['node_modules', '<rootDir>/'],
   testEnvironment: 'jest-environment-jsdom',
-  testMatch: ['**/__tests__/**/*.(j|t)s?(x)', '!**/*.e2e.spec.(j|t)s'],
+  testMatch: ['**/__tests__/**/*.(j|t)s?(x)', '!**/*.e2e.spec.(j|t)s?(x)'],
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

next.config.mjs

@@ -1,10 +1,8 @@
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  compiler: {
-    styledComponents: true,
-  },
   eslint: {
-    dirs: ['pages', 'src', '__tests__'],
+    dirs: ['pages', 'src', '__mocks__', '__tests__'],
   },
 }
 export default nextConfig