CircleCI上のフロントエンドテストを30分から10分に短縮した話

CircleCI上のテスト実行時間が長くてイライラしているあなた！
誰でも簡単にできるCircleCIの実行時間を短縮する方法を共有します！！！

2021/05/20 【テスト・新機能LT大会編】CircleCI コミュニティミートアップにて登壇した内容になります！
https://circleci.connpass.com/event/211477/

Transcript

1. CircleCI上のフロントエンドテストを 30分から10分に短縮した話 【テスト・新機能LT大会編】CircleCI コミュニティミートアップ 20. May. 2021 - Sho Kanamaru (@show_kanamaru)
2. 2018年1月より、株式会社POLというスタートアップで LabBaseというプロダクトの開発を担当しています． フロントエンド(React)、バックエンド(Java)両方書いてます． 月1でフットサルやってるのでぜひ一緒にやりましょう！ 自己紹介 金丸 翔 @show_kanamaru
3. 科学技術人材のキャリアプラットフォーム
 （オンラインイベント） 
 （第二新卒/中途）
 （新卒）

4. CircleCIでこんな経験はありませんか？ 1ファイルしか変更してない のに、全テスト実行してる・・・ 不具合発生して早くリリース したいのにテスト回るの遅くて マージできない・・・ テスト遅くて特売の時間に 間に合わないわ・・・
5. CircleCIでこんな経験はありませんか？ 誰でも簡単にできるCircleCIの実行時間を 短縮する方法を共有します！！！
6. 1. 現状の課題
7. 現状の課題 フロントエンドのテストが30分以上かかっていた
8. 現状の課題 Test Suites： 352個 Tests： 　　 1654個 Snapshot：　 256個
9. 2. 改善策
10. フロントエンドのディレクトリ構成 app - student - 学生ドメインのコードを管理 - client - 企業ドメインコードを管理 - writer - ライタードメインコードを管理 - common - 学生、企業共通のドメイン（新規登録、メッセージなど）を管理 - shared - 上記のディレクトリ全てで使用するものの管理（マスターデータなど）
11. フロントエンドのディレクトリ構成 yarn test app/* yarn test app/student/* yarn test app/client/* yarn test app/writer/* yarn test app/common/* yarn test app/shared/* jobを分解して並列で回せば速くなるのでは？
12. やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正
13. やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正
14. .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を分解する
15. やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正
16. 設定ファイルの修正 job分解に合わせて各設定ファイルを修正 .eslintrc.js tsconfig.json .flowconfig jest.config.js
17. やったこと 1. .circleci/config.ymlの修正 2. ディレクトリ指定してFlowチェックができるように 3. ディレクトリ指定してTypeScriptチェックができるように 4. ディレクトリ指定してESLintを回せるように 5. ディレクトリ指定してJestを回せるように 6. ディレクトリごとにカバレッジ計測ができるように 7. package.jsonのscripts修正
18. 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/" 変更前 変更後
19. jobを分解した結果・・・ 30分から12分まで短縮された！
20. さらに・・・ 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 変更後 修正したディレクトリだけテストを回すことが可能！
21. 番外編
22. coverageオプションを付けていると・・・ coverageを可視化してくれるがテストの実行が遅くなる
23. coverageオプションを削除すると・・・ 9分弱まで短縮された！
24. 今後の展望
25. 今後の展望 1. APIとフロントの分離 2. 変更に関係するファイルのみテストをするように 3. 型／構文チェック、テストも並列に回せるように 目指せ5分以内！！！
26. Thanks ! 👋