StorybookのインタラクションテストのCIを爆速にした

解消したい課題

Storybookのインタラクションテストが遅すぎる。
インタラクションテストをメインのテストとして開発を始め、数ヶ月経った頃、CIの実行時間が無視できない時間になってきました。
Jestで実行すれば、1,2分で終わるテストがStorybookだと10分程度かかり、Storyが増えるごとに時間も伸びてきていました。

インタラクションテストのメリットは多くあるため、CIを速くするため試行錯誤しました。
CIでの実行方法などは↓の記事などを参照すると良いと思います。
https://zenn.dev/azukiazusa/articles/storybook-interaction-testing#ci-上でテストを実行する

並列実行で高速化を実現

結論、並列実行させることで、10分以上の処理を3,4分に縮め、その後Story増加に伴うCI実行時間の延びを大幅に鈍化させました。
test-storybookにはshardというオプションがあり、以下は10分割して実行している設定です。

  Storybook:
    needs: Install
    runs-on: ubuntu-latest
    strategy:
      matrix:
        shard: [1/10, 2/10, 3/10, 4/10, 5/10, 6/10, 7/10, 8/10, 9/10, 10/10]
    steps:
      - 省略
      - run: npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "npm run build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "npx wait-on http://127.0.0.1:6006 && npm run test-storybook -- --coverage --url http://127.0.0.1:6006 --maxWorkers 1 --shard=${{ matrix.shard }}"

終わりに

インタラクションテストは書き心地が良く、目視による確認でJestでのテスト以上に品質面での恩恵があると感じています。
実行が遅いというのが最大の欠点ですが、今回のようにある程度の解決策はあります。
中規模くらいのプロダクトであればあまり問題に感じないレベルと思いますので、導入を検討してみてはいかがでしょうか。