Storybook 内の時間を固定して無駄なスナップショット差分を減らそう！

困ったこと

ユニークビジョンのプロダクトのフロントエンドは、Chromatic で Storybook のスナップショット差分をレビューしています。
現在時刻に依存しているコンポーネントがある場合、時刻が少しでも変化してしまうと、スナップショット差分として検出されるという問題がありました。

やや見づらいですが、右の時刻部分に緑色で差分が表示されています。

このようなコンポーネントが十数個あり、毎回差分として検出されるため、本来見たい差分が見づらい状況になっていました。

解決方法

Storybook 内の時間を MockDate というライブラリを使って固定することで解決しました。

yarn add -D mockdate

Storybook 側の設定は簡単です。

preview.js

import MockDate from 'mockdate'

MockDate.set(new Date('2022-12-15T00:00:00'));

解決！

追記

日付操作系のライブラリとの相性

date-fns や dayjs でも使えるの？という疑問があったので、調査しました。

結果はどちらも期待通りで、固定した時間で動作しました。

// date-fns
startOfTomorrow() // -> Fri Dec 16 2022 00:00:00 GMT+0900 (日本標準時)

// dayjs
dayjs().toDate() // -> Fri Dec 15 2022 00:00:00 GMT+0900 (日本標準時)

相性の悪いライブラリ

vue-chartjs というグラフ表示ライブラリは、mockdate を使っていると storybook 上で表示されたりされなかったりする、という不具合が生じてしまいました。原因は不明ですが、一部のライブラリはこのように上手く動作しない可能性があるので注意してください。