feat: ✨ add note

src/contents/writings/20240302/index.mdx

@@ -0,0 +1,49 @@
+---
+id: "20240302"
+type: "note"
+title: "テストが遅いなと思ったら faker がデカすぎた"
+published: "2024-03-02"
+tags:
+  - Jest
+---
+
+Storybook x MSW x Jest を使ってコンポーネント駆動のとても開発体験のいいものにしたいなと思い、変更を入れてみるとかなり時間がかかるようになりました。
+
+`composeStories` があまりよくないのか？とか、Jest のメモリ管理周りなのか？と色々調査をしていると、意外なところで遅くなっていることが判明しました。
+
+## 結論: faker がデカすぎた
+
+API モックに MSW を使用していて、一覧取得や詳細取得のモックデータを用意する際に人間がデータを決めるとどうしても偏りがあったりコピペになったりとあまり健全なデータではないなと思い、モックデータをランダム化するために `@faker-js/faker` を利用しています。
+
+https://fakerjs.dev/
+
+どうやらこいつのパッケージサイズがデカすぎたのが問題のようで、**テストの実行ではなくインポートがボトルネックになっていた**ようでした。
+
+## 解決案: インポート先を変える
+
+では、もうズブズブな関係である faker と別れなければいけないのかというとそうでもなく、インポート先を変えるだけで相当速度は改善されます。（英語であれば ja -> en）
+
+```diff
+- import { faker } from '@faker-js/faker'
++ import { faker } from '@faker-js/faker/locale/ja'
+```
+
+これだけで結構サイズが下がるっぽく、私はバンドルサイズとか全然詳しくないので認識が異なる可能性がありますが、[pkg-size.dev](https://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 を使っているプロジェクトって全然ないんでしょうか？ググっても全然引っ掛からなかたのでだいぶハマりました。