Skip to content

nt-mino/nextjs

 
 

Repository files navigation

Next.js サンプルアプリケーション

これは「フロントエンド開発のためのテスト入門」の第7章〜第10章で解説する、サンプルアプリケーションです。CRUD 機能を備えた Web アプリケーションをテスト対象に、実践的なフロントエンドテストについて解説します。

  • 第7章 Web アプリケーション結合テスト
  • 第8章 UI コンポーネントエクスプローラー
  • 第9章 ビジュアルリグレッションテスト
  • 第10章 E2E テスト
  • 付録 A GitHub Actions で実行する UI コンポーネントテスト
  • 付録 B GitHub Actions で実行する E2E テスト

フロントエンドフレームワーク(Next.js)特有のトピックは、なるべく7章に限定し、他フロントエンドフレームワークを使用する読者の方にも応用できる内容を検討しました。付録 A・B で解説している GitHub Actions のサンプルコードも含まれます。

第7章 Web アプリケーション結合テスト

Next.js や React 特有の結合テストについて解説します。React の Context API や Next.js Router を織り交ぜた結合テストが中心となっており、後半には MSW も登場します。

【サンプルコード】src/components/**/*.test.tsx

$ npm test

第8章 UI コンポーネントエクスプローラー

Storybook をテストツールとして使用する方法について解説します。a11y アドオン等を使用したデバッグ手法から、Test runner を使用したブラウザテストを紹介します。

【サンプルコード】src/components/**/*.stories.tsx

$ npm run storybook:build
$ npm run storybook:ci

第9章 ビジュアルリグレッションテスト

reg-suit を使用した VRT の実践方法について解説します。このリポジトリにも VRT はありますが、本編はより簡素にした以下サンプルリポジトリで別途解説します。

【サンプルコード】https://github.com/frontend-testing-book/vrt

第10章 E2E テスト

Playwright を使用した、E2E テストを解説します。DB/Redis/S3 が連携して提供される機能を中心に、E2E テスト観点を解説。 Playwright, Next.js, Prisma の詳細については解説しきれない(主旨から外れる)ため、 理解するうえで必要最低限の解説にとどめます。

【サンプルコード】e2e/**.spec.ts

$ npm run docker:e2e:build
$ npm run docker:e2e:ci

付録 A GitHub Actions で実行する UI コンポーネントテスト

ここまで解説した自動テストを GitHub Actions で実行する方法を解説します。ワークフロー解説のほか、Actions パネルの見方について取り上げます。

【サンプルコード】.github/workflows/*.yaml

付録 B GitHub Actions で実行する E2E テスト

GitHub Actions テスト向けの Docker ファイルの書き方、docker-compose ファイルの書き方について解説します。

【サンプルコード】Dockerfile.*, doceker-compose.*.yaml

Installation

Node.js がインストールされている開発環境で、依存モジュールをインストールします。

$ npm i

Create MinIO Bucket with MinIO Client

開発環境では S3 には接続せず、ローカル環境で利用できる S3 互換の MinIO を使用します。
MinIO Client がインストールされていない場合、はじめにインストールをします。

$ brew install minio/stable/mc

開発環境の MinIO にバケットを作成します。Docker Compose で MinIO サーバーを起動後、バケット生成スクリプトを実行します。

$ docker compose up -d
$ sh create-image-bucket.sh

DB マイグレーションの実行

$ docker compose up -d
$ npm run prisma:migrate

開発サーバーの起動

$ docker compose up -d
$ npm run dev

UI コンポーネントテストのローカル実行

$ npm run storybook:build && npm run storybook:ci

E2E テストのローカル実行

$ npm run docker:e2e:build && npm run docker:e2e:ci

About

フロントエンドテスト入門

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 84.7%
  • CSS 11.2%
  • JavaScript 4.0%
  • Shell 0.1%