T-CREATOR

Jest と Prettier の連携:コード品質とテストの両立

Jest と Prettier の連携:コード品質とテストの両立

モダンな Web アプリケーション開発において、コードの品質管理は開発者にとって永続的な課題となっています。特に、テストフレームワークの Jest とコードフォーマッターの Prettier を組み合わせる際、設定の競合や複雑な管理に頭を悩ませた経験はありませんか?

本記事では、Jest と Prettier を効果的に連携させ、チーム全体でのコード品質向上と開発者体験の改善を実現する方法をご紹介いたします。実際のエラー事例から具体的な解決策まで、実践的な内容をお届けしますので、ぜひ最後までお付き合いください。

背景

モダン開発環境での品質管理の重要性

近年の Web アプリケーション開発では、コードの可読性、保守性、そして信頼性が以前にも増して重要になってきています。特に TypeScript や React、Next.js を使った開発では、複雑性が増す分、しっかりとした品質管理体制が必要不可欠です。

Jest はその中でもテスト環境において標準的な地位を確立しており、一方で Prettier はコードフォーマッティングの分野で圧倒的な支持を得ています。この 2 つのツールを適切に連携させることで、開発チーム全体の生産性を大幅に向上させることができるのです。

なぜ Jest と Prettier の連携が重要なのか

要素Jest 単体Prettier 単体連携時
1テスト品質コード統一包括的品質管理
2バグ検出可読性向上開発効率最大化
3機能保証チーム協調持続可能な開発

しかしながら、これらのツールを個別に導入することは比較的簡単ですが、効果的に連携させるとなると、様々な課題に直面することになります。

課題

Jest と Prettier の設定競合問題

多くの開発者が最初に直面するのが、Jest と Prettier の設定ファイル間での競合問題です。特に以下のようなエラーに遭遇することがあります。

javascript// よく見るエラーメッセージ
Error: Prettier and Jest have conflicting configuration
SyntaxError: Unexpected token 'import'
TypeError: Cannot read property 'testEnvironment' of undefined

これらのエラーは、通常以下のような状況で発生します:

  1. モジュールシステムの不整合

    • Jest が CommonJS を期待している一方で、Prettier が ES Modules での処理を前提としている場合
  2. 設定ファイルの読み込み順序

    • package.json での設定項目の競合や、設定ファイルの優先順位の問題
  3. プラグインの重複

    • ESLint プラグインとの競合により、フォーマットルールが二重に適用される問題

コード品質管理の複雑さ

実際の開発現場では、Jest と Prettier に加えて、TypeScript、ESLint、Husk y など多数のツールを組み合わせて使用します。この複雑な環境下では、以下のような課題が発生しがちです。

bash# 典型的なエラー例
✗ prettier --check failed
✗ jest --coverage failed
✗ eslint . failed

Error: 'describe' is not defined
Error: Parsing error: Unexpected token =>

これらの問題が積み重なると、開発者は本来集中すべきビジネスロジックの実装から意識が逸れてしまい、設定ファイルの調整に多大な時間を費やすことになってしまいます。

開発者体験の悪化

品質管理ツールが適切に連携していない環境では、以下のような問題が発生し、開発者体験を著しく悪化させます:

課題影響頻発度
1フォーマットエラーでテスト失敗高い
2設定変更による既存テストの破綻中程度
3新メンバーの環境構築困難高い
4CI/CD パイプラインでの予期しない失敗中程度

特に厄介なのは、ローカル環境では正常に動作するのに、CI 環境でのみ失敗するケースです。

bash# CI環境でよく見るエラー
✗ Code style issues found in the following file(s):
✗ Test suites: 5 failed, 0 passed, 5 total
✗ Process exit code: 1

これらの問題は、開発チーム全体のモチベーション低下や、リリースサイクルの遅延につながる重大な課題となっています。

解決策

基本的な連携設定方法

Jest と Prettier を効果的に連携させるためには、段階的なアプローチが重要です。まず、基本的な設定から始めて、徐々に高度な機能を追加していくことをお勧めします。

1. 依存関係の整理

最初に行うべきは、必要なパッケージを正しくインストールすることです。

bash# 基本パッケージのインストール
yarn add --dev jest prettier
yarn add --dev @types/jest
yarn add --dev jest-environment-jsdom

2. package.json での基本設定

package.json ファイルで、Jest と Prettier の基本設定を行います。

json{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "jest": {
    "testEnvironment": "jsdom",
    "setupFilesAfterEnv": ["<rootDir>/src/setupTests.ts"]
  }
}

この設定により、テスト実行とコードフォーマットを独立して実行できるようになります。

ESLint を含めた三位一体の設定

真の威力を発揮するのは、Jest、Prettier、そして ESLint を組み合わせた三位一体の設定です。

ESLint と Prettier の競合回避

まず、ESLint と Prettier の競合を回避するための設定を行います。

bash# 競合回避のためのプラグインをインストール
yarn add --dev eslint-config-prettier
yarn add --dev eslint-plugin-prettier

続いて、.eslintrc.json での設定を行います。

json{
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["prettier", "@typescript-eslint"],
  "rules": {
    "prettier/prettier": "error"
  },
  "env": {
    "jest": true,
    "node": true,
    "es6": true
  }
}

この設定により、Prettier のフォーマットルールが ESLint のエラーとして表示されるようになり、統一されたコード品質チェックが可能になります。

設定ファイルの最適化

効率的な開発環境を構築するためには、各設定ファイルを最適化することが重要です。

Prettier 設定の最適化

.prettierrc ファイルで、チーム全体で統一されたフォーマットルールを定義します。

json{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

Jest 設定の詳細化

jest.config.js ファイルで、より詳細なテスト環境を設定します。

javascriptmodule.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}',
  ],
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/index.tsx',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

これらの設定により、コードカバレッジの目標値を設定し、品質の可視化が可能になります。

具体例

package.json 設定例

実際のプロジェクトで使用できる、完全な package.json 設定例をご紹介します。

json{
  "name": "jest-prettier-integration",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "quality": "yarn lint && yarn format:check && yarn test"
  }
}

この設定により、yarn qualityコマンド一つで、リント、フォーマット、テストをまとめて実行できるようになります。

.prettierrc 設定例

チーム開発に適した、実用的な Prettier 設定です。

json{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

jest.config.js 設定例

TypeScript と React を使用した現代的なプロジェクトに対応した Jest 設定です。

javascriptconst nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapping: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!**/.next/**',
  ],
  coverageThreshold: {
    global: {
      branches: 75,
      functions: 75,
      lines: 75,
      statements: 75,
    },
  },
};

module.exports = createJestConfig(customJestConfig);

統合スクリプトの実装

開発効率を最大化するため、複数のツールを統合したスクリプトを作成します。

pre-commit フックの設定

husky と lint-staged を使用して、コミット前の自動チェックを設定します。

bash# 必要なパッケージのインストール
yarn add --dev husky lint-staged

package.json に husky の設定を追加します。

json{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "jest --bail --findRelatedTests",
      "git add"
    ]
  }
}

CI/CD 用の統合スクリプト

GitHub Actions 用の設定例です。

yamlname: Code Quality Check

on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run ESLint
        run: yarn lint

      - name: Check Prettier formatting
        run: yarn format:check

      - name: Run tests
        run: yarn test:coverage

この設定により、プルリクエストやプッシュのたびに自動的にコード品質チェックが実行されます。

まとめ

連携のメリット総括

Jest と Prettier の適切な連携により、以下のような素晴らしいメリットを享受できます:

メリット効果長期的影響
1コード品質の自動保証バグ減少、保守性向上
2開発者体験の向上生産性向上、ストレス軽減
3チーム協調の促進統一されたコードベース
4CI/CD の安定化リリース品質の向上

特に重要なのは、これらのツールが開発者の創造性を制限するのではなく、むしろ本来集中すべき課題解決に専念できる環境を提供してくれることです。

継続的な運用のポイント

成功する品質管理体制を維持するためには、以下のポイントを心がけましょう:

1. 段階的な導入

一度にすべての設定を完璧にしようとせず、チームの成熟度に合わせて段階的に機能を追加していくことが重要です。

2. チーム全体での合意形成

フォーマットルールやテスト方針は、チーム全体で議論し、全員が納得できる形で決定することが大切です。

3. 定期的な見直し

プロジェクトの進展に合わせて、設定を見直し、最適化を続けることで、長期的な価値を維持できます。

4. 新メンバーへの配慮

新しくチームに参加するメンバーが、迷うことなく開発環境を構築できるよう、ドキュメントの整備も忘れずに行いましょう。

コード品質の向上は、一朝一夕で達成できるものではありません。しかし、Jest と Prettier の連携という小さな一歩から始めることで、チーム全体の開発文化を大きく変革することができるのです。

皆さんも、今日からこれらのツールを活用して、より良い開発体験を実現してみてはいかがでしょうか。きっと、コードを書くことがより楽しく、より意味のある作業になることでしょう。

関連リンク