測試

npx create-next-app@latest --example with-cypress with-cypress-app

npm install --save-dev cypress

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "cypress:open": "cypress open"
  }
}

npm run cypress:open

import Link from 'next/link'

export default function Home() {
  return (
    <nav>
      <h1>首頁</h1>
      <Link href="/about">關於</Link>
    </nav>
  )
}

export default function About() {
  return (
    <div>
      <h1>關於頁面</h1>
      <Link href="/">首頁</Link>
    </div>
  )
}

describe('導航', () => {
  it('應該導航到關於頁面', () => {
    // 從首頁開始
    cy.visit('http://localhost:3000/')

    // 找到包含 "about" 的連結並點擊
    cy.get('a[href*="about"]').click()

    // 新網址應包含 "/about"
    cy.url().should('include', '/about')

    // 新頁面應包含標題 "About page"
    cy.get('h1').contains('About Page')
  })
}

import AboutPage from './about.js'

describe('<AboutPage />', () => {
  it('應該渲染並顯示預期內容', () => {
    // 掛載關於頁面的 React 元件
    cy.mount(<AboutPage />)

    // 新頁面應包含標題 "About page"
    cy.get('h1').contains('About Page')

    // 驗證包含預期 URL 的連結存在
    // *跟隨* 連結更適合 E2E 測試
    cy.get('a[href="/"]').should('be.visible')
  })
}

{
  "scripts": {
    //...
    "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
    "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
    "component": "cypress open --component",
    "component:headless": "cypress run --component"
  }
}

npx create-next-app@latest --example with-playwright with-playwright-app

npm install --save-dev @playwright/test

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test:e2e": "playwright test"
  }
}

import Link from 'next/link'

export default function Home() {
  return (
    <nav>
      <Link href="/about">關於</Link>
    </nav>
  )
}

export default function About() {
  return (
    <div>
      <h1>關於頁面</h1>
    </div>
  )
}

npx create-next-app@latest --example with-jest with-jest-app

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

import nextJest from 'next/jest.js'

const createJestConfig = nextJest({
  // 提供 Next.js 應用程式的路徑以在測試環境中載入 next.config.js 和 .env 檔案
  dir: './',
})

// 加入任何要傳遞給 Jest 的自訂設定
/** @type {import('jest').Config} */
const config = {
  // 在每個測試執行前加入更多設定選項
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

  testEnvironment: 'jest-environment-jsdom',
}

// 以這種方式匯出 createJestConfig 以確保 next/jest 可以載入非同步的 Next.js 設定
export default createJestConfig(config)

module.exports = {
  collectCoverage: true,
  // 在 node 14.x 上，coverage provider v8 提供良好的速度和還不錯的報告
  coverageProvider: 'v8',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  moduleNameMapper: {
    // 處理 CSS 導入 (使用 CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

    // 處理 CSS 導入 (不使用 CSS modules)
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',

    // 處理圖片導入
    // https://jestjs.io/docs/webpack#handling-static-assets
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,

    // 處理模組別名
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  // 在每個測試執行前添加更多設定選項
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jsdom',
  transform: {
    // 使用 babel-jest 搭配 next/babel preset 來轉譯測試
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
}

module.exports = {
  src: '/img.jpg',
  height: 24,
  width: 24,
  blurDataURL: 'data:image/png;base64,imagedata',
}

module.exports = {}

setupFilesAfterEnv: ['<rootDir>/jest.setup.js']

import '@testing-library/jest-dom'

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

moduleNameMapper: {
  '^@/components/(.*)$': '<rootDir>/components/$1',
}

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest --watch"
  }
}

import { render, screen } from '@testing-library/react'
import Home from '../pages/index'
import '@testing-library/jest-dom'

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /welcome to next\.js!/i,
    })

    expect(heading).toBeInTheDocument()
  })
})

import { render } from '@testing-library/react'
import Home from '../pages/index'

it('renders homepage unchanged', () => {
  const { container } = render(<Home />)
  expect(container).toMatchSnapshot()
})