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
これらのエラーは、通常以下のような状況で発生します:
-
モジュールシステムの不整合
- Jest が CommonJS を期待している一方で、Prettier が ES Modules での処理を前提としている場合
-
設定ファイルの読み込み順序
- package.json での設定項目の競合や、設定ファイルの優先順位の問題
-
プラグインの重複
- 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 | 新メンバーの環境構築困難 | 高い |
4 | CI/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 | チーム協調の促進 | 統一されたコードベース |
4 | CI/CD の安定化 | リリース品質の向上 |
特に重要なのは、これらのツールが開発者の創造性を制限するのではなく、むしろ本来集中すべき課題解決に専念できる環境を提供してくれることです。
継続的な運用のポイント
成功する品質管理体制を維持するためには、以下のポイントを心がけましょう:
1. 段階的な導入
一度にすべての設定を完璧にしようとせず、チームの成熟度に合わせて段階的に機能を追加していくことが重要です。
2. チーム全体での合意形成
フォーマットルールやテスト方針は、チーム全体で議論し、全員が納得できる形で決定することが大切です。
3. 定期的な見直し
プロジェクトの進展に合わせて、設定を見直し、最適化を続けることで、長期的な価値を維持できます。
4. 新メンバーへの配慮
新しくチームに参加するメンバーが、迷うことなく開発環境を構築できるよう、ドキュメントの整備も忘れずに行いましょう。
コード品質の向上は、一朝一夕で達成できるものではありません。しかし、Jest と Prettier の連携という小さな一歩から始めることで、チーム全体の開発文化を大きく変革することができるのです。
皆さんも、今日からこれらのツールを活用して、より良い開発体験を実現してみてはいかがでしょうか。きっと、コードを書くことがより楽しく、より意味のある作業になることでしょう。
関連リンク
- blog
Culture, Automation, Measurement, Sharing. アジャイル文化を拡張する DevOps の考え方
- blog
開発と運用、まだ壁があるの?アジャイルと DevOps をかけ合わせて開発を爆速にする方法
- blog
スクラムマスターは雑用係じゃない!チームのポテンシャルを 120%引き出すための仕事術
- blog
「アジャイルやってるつもり」になってない?現場でよく見る悲劇と、僕らがどう乗り越えてきたかの話
- blog
強いチームは 1 日にしてならず。心理的安全性を育むチームビルディングの鉄則
- blog
トヨタ生産方式から生まれた「リーン」。アジャイル開発者が知っておくべきその本質
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来