Testing JavaScript
- 関数のmockの話。一番単純にやるなら、まず自前で特定のメソッドを上書きすることができる。（Monkey Patching)
- それだと、mockが代わりに実行されるので中身に依存しないテストがしたい場合はまず目標が達成される。でも、同時にそのmockにしたメソッドがちゃんとした引数でちゃんとした回数呼ばれてるか確認したい時がある。
- そう言う時に、ただ上書きするのではなく、Jestの
jest.fn(mockImpl)を使う。これをするとmockと言うプロパティ配下に呼ばれた回数やその時の引数が記録されて、それをもとにtoHaveBeenCalledWith()などのアサーションが利用できる。 - さて、テストが実行し終わったら他のテストに影響しないように、上書きを解除するわけだけどこれは毎回やる作業になるのでもちろんUtil的なものがある。それが、
Jest.spyOn()。まず、Jest.fn(mockImpl)をそのまま上書きしていたのをJest.spyOn(overwriteObj, Propname)に変更して、.mockImplみたいなやつでmockを実装を渡す。そしてテスト終了時にはmock.Restore()を呼ぶようにする。 - これらをEsModuleでやろうとすると、MonkeyPatchingできるようになっていないので困る。と言うことで、モジュール自体をmockにすることで解決する。require.cacheの中身を除くとモジュールの一覧を持っている(JSにおいては全てがObjectである、を今更ながら強く感じた)。これを上書きする。そうしてrequireされた時には必ず実際のモジュールではなくmockが使われるようにする。
- これと同等のことが、
Jest.mock()でできる。実行時にはJestが自動的に宣言をファイルの最上部に移動させている。(先にrequireされないように) -大体このmockオブジェクトは使いまわしたい。そう言う時は特定のフォルダの中にmockObject達のファイルをまとめて置いておけばJestが勝手にピックアップしてくれる(これ昔やったな…記憶が蘇ってきた)
Figma
- PageとFrameの違いがよくわからんなと思っていたけど、プロトタイプ作る時はFrame同士を繋ぐので基本的にはFrameを増やしていくイメージな感じがする。Pageを共通スタイル置き場として用いる記事とかがあったのでPageはそんなに増えるものではなさそう。
