How to freeze time writing a story with Storybook?

Question

I have written a story with Storybook UI and deploying it with Chromatic. The issue is that my component takes into account the time now (I am using luxon, so I am using DateTime.now(), and it takes the diff with another date passed by props to show how many minutes have passed. Now, I am passing a fixed date to compare with, but the diff between now and that date makes it so that everytime code is pushed to Chromatic, it sees that as a change. How can I "freeze" DateTime.now() in Storybook so that this problem doesn't happen?

Answer 1

I just patch my Date.now function within the individual Story. You might want to patch other function depending upon how you're grabbing the date.

Date.now = () => new Date("2022-06-13T12:33:37.000Z");