CircleCI上のフロントエンドテストを 30分から10分に短縮した話 【テスト・新機能LT大会編】CircleCI コミュニティミートアップ 20. May. 2021 - Sho Kanamaru (@show_kanamaru)

2018年1月より、株式会社POLというスタートアップで LabBaseというプロダクトの開発を担当しています． フロントエンド(React)、バックエンド(Java)両方書いてます． 月1でフットサルやってるのでぜひ一緒にやりましょう！ 自己紹介 金丸 翔 @show_kanamaru

科学技術人材のキャリアプラットフォーム
 （オンラインイベント） 
 （第二新卒/中途）
 （新卒）


CircleCIでこんな経験はありませんか？ 1ファイルしか変更してない のに、全テスト実行してる・・・ 不具合発生して早くリリース したいのにテスト回るの遅くて マージできない・・・ テスト遅くて特売の時間に 間に合わないわ・・・

CircleCIでこんな経験はありませんか？ 誰でも簡単にできるCircleCIの実行時間を 短縮する方法を共有します！！！

1. 現状の課題

現状の課題 フロントエンドのテストが30分以上かかっていた

現状の課題 Test Suites： 352個 Tests： 　　 1654個 Snapshot：　 256個

2. 改善策

フロントエンドのディレクトリ構成 app - student - 学生ドメインのコードを管理 - client - 企業ドメインコードを管理 - writer - ライタードメインコードを管理 - common - 学生、企業共通のドメイン（新規登録、メッセージなど）を管理 - shared - 上記のディレクトリ全てで使用するものの管理（マスターデータなど）

フロントエンドのディレクトリ構成 yarn test app/* yarn test app/student/* yarn test app/client/* yarn test app/writer/* yarn test app/common/* yarn test app/shared/* jobを分解して並列で回せば速くなるのでは？

やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正

やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正

.circleci/config.ymlの修正 frontend_test: steps: - checkout - judge_job_execution: target_directory: project/app - run: name: Flow type check command: npm run flow - run: name: TypeScript type check command: npm run tsc - run: name: ESLint and Jest check command: npm run lint && npm run test 変更前 student_frontend_test: steps: - checkout - judge_job_execution: target_directory: project/app/student - run: name: Flow type check command: npm run flow app/student　 - run: name: TypeScript type check command: npm run tsc:student - run: name: ESLint and Jest check command: npm run lint app/student && npm run test:student 変更後 student以外も同様にjobを分解する

やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正

設定ファイルの修正 job分解に合わせて各設定ファイルを修正 .eslintrc.js tsconfig.json .flowconfig jest.config.js

やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正

package.jsonの修正 student以外も同様にscriptsを分解 "test": "cross-env NODE_ENV=test jest --coverage --runInBand --silent", "test:student": "cross-env NODE_ENV=test jest --config=./app/student/jest.student.config.js --runInBand --coverage --silent app/student/" 変更前 変更後

jobを分解した結果・・・ 30分から12分まで短縮された！

さらに・・・ student_frontend_test: steps: - checkout - judge_job_execution: target_directory: project/app/student - run: name: Flow type check command: npm run flow app/student　 - run: name: TypeScript type check command: npm run tsc:student - run: name: ESLint and Jest check command: npm run lint app/student && npm run test:student 変更後 修正したディレクトリだけテストを回すことが可能！

番外編

coverageオプションを付けていると・・・ coverageを可視化してくれるがテストの実行が遅くなる

coverageオプションを削除すると・・・ 9分弱まで短縮された！

今後の展望

今後の展望 1. APIとフロントの分離 2. 変更に関係するファイルのみテストをするように 3. 型／構文チェック、テストも並列に回せるように 目指せ5分以内！！！

Thanks ! 👋