テスト

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">About</Link>
    </nav>
  )
}

export default function About() {
  return (
    <div>
      <h1>About ページ</h1>
      <Link href="/">ホームページ</Link>
    </div>
  )
}

describe('ナビゲーション', () => {
  it('about ページに遷移する', () => {
    // インデックスページから開始
    cy.visit('http://localhost:3000/')

    // "about" を含む href 属性のリンクを見つけてクリック
    cy.get('a[href*="about"]').click()

    // 新しい URL は "/about" を含むべき
    cy.url().should('include', '/about')

    // 新しいページは "About Page" という h1 を含むべき
    cy.get('h1').contains('About Page')
  })
})

import AboutPage from './about.js'

describe('<AboutPage />', () => {
  it('期待されるコンテンツをレンダリングして表示する', () => {
    // About ページの React コンポーネントをマウント
    cy.mount(<AboutPage />)

    // 新しいページは "About Page" という h1 を含むべき
    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">About</Link>
    </nav>
  )
}

export default function About() {
  return (
    <div>
      <h1>About ページ</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.config.js と .env ファイルを読み込むために Next.js アプリのパスを提供
  dir: './',
})

// Jest に渡すカスタム設定を追加
/** @type {import('jest').Config} */
const config = {
  // 各テストの実行前に追加のセットアップオプションを設定
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

  testEnvironment: 'jest-environment-jsdom',
}

// next/jest が非同期の Next.js 設定を読み込めるように、この方法で createJestConfig をエクスポート
export default createJestConfig(config)

module.exports = {
  collectCoverage: true,
  // Node 14.xでは、カバレッジプロバイダーv8が高速でほぼ良好なレポートを提供します
  coverageProvider: 'v8',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  moduleNameMapper: {
    // CSSモジュールを使用したCSSインポートの処理
    // https://jestjs.io/docs/webpack#mocking-css-modules
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

    // CSSモジュールを使用しないCSSインポートの処理
    '^.+\\.(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: {
    // next/babelプリセットでテストをトランスパイルするためにbabel-jestを使用
    // 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()
})