Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

832534770705425fc1f64ad60cb875a2?s=128

sho kanamaru

May 20, 2021
Tweet

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 ! 👋