Jest で日付をモック化する

はじめに

今のチームでフロントは React で書いており、テストは Jest を用いて行なっているのですが、「今日の日付」を表示するコンポーネントのテストを書くケースがありました。

なんらかをモック化しないとスナップショットが通らないはずなのですが、そういえば Jest でモック化ってどうやるんだっけと忘れていたのでメモしておこうと思います。

具体例

⑴ Date.now()をモック化する

Date.now = jest.fn(() => 1482363367071);

これで Date.now() はいつでも 1482363367071 を返すようになりました。

参考

jestjs.io

⑵ 特定の関数をモック化する

const mockedGetDate = jest.spyOn(Date.prototype, 'getDate');
const mockedGetDay = jest.spyOn(Date.prototype, 'getDay');
const mockedGetMonth = jest.spyOn(Date.prototype, 'getMonth');

mockedGetMonth.mockImplementation(() => 4);
mockedGetDate.mockImplementation(() => 1);
mockedGetDay.mockImplementation(() => 0);

こちらでは spyOn を用いて getDate() getDay() getMonth() をモック化しています。

参考

jestjs.io

jest.fn と spyOn の違い

上では jest.fn を使ったり spyOn を使ったりしていますが特に深い意味はありません。どちらも同じようなことができます。

spyOn はモック化する前の元の挙動に戻すことがすぐにできるので、「元の挙動も保持しておきたい」という場合に使われますが、 jest.fn でも同じようなことができるので好みの問題かなと思っています。

詳しいことはこちらの記事が勉強になりました。

medium.com

終わりに

Jest で日付をモック化する具体例を 2 つ紹介しました。

参考になれば幸いです。