テストが遅いなと思ったら faker がデカすぎた

Storybook x MSW x Jest を使ってコンポーネント駆動のとても開発体験のいいものにしたいなと思い、変更を入れてみるとかなり時間がかかるようになりました。

composeStories があまりよくないのか？とか、Jest のメモリ管理周りなのか？と色々調査をしていると、意外なところで遅くなっていることが判明しました。

結論: faker がデカすぎた

API モックに MSW を使用していて、一覧取得や詳細取得のモックデータを用意する際に人間がデータを決めるとどうしても偏りがあったりコピペになったりとあまり健全なデータではないなと思い、モックデータをランダム化するために @faker-js/faker を利用しています。

Generate massive amounts of fake (but reasonable) data for testing and development.

fakerjs.dev

どうやらこいつのパッケージサイズがデカすぎたのが問題のようで、テストの実行ではなくインポートがボトルネックになっていたようでした。

解決案: インポート先を変える

では、もうズブズブな関係である faker と別れなければいけないのかというとそうでもなく、インポート先を変えるだけで相当速度は改善されます。（英語であれば ja -> en）

- import { faker } from '@faker-js/faker'
+ import { faker } from '@faker-js/faker/locale/ja'

これだけで結構サイズが下がるっぽく、私はバンドルサイズとか全然詳しくないので認識が異なる可能性がありますが、pkg-size.dev で確認してみると以下のようになりました：

• @faker-js/faker: 3.9 MB minified (1MB gzip)
• @faker-js/faker/locale/ja: 607 KB minified (179KB gzip)

より早くするには

これだけでも自分の確認した限りではかかる時間が 1/2 ほどになりましたが、より早くするには faker を必要な場所でのみインポートするに限るかなと思います。

たとえば、

• .storybook/preview.tsx で MSW のデフォルトハンドラをなくし、各 Story でハンドラを入れる
• setupTests で faker.seed を設定するのではなく、各 Story で設定する

とかが考えられます。試してはないですが。

おわりに

Storybook x Jest x faker を使っているプロジェクトって全然ないんでしょうか？ググっても全然引っ掛からなかたのでだいぶハマりました。