Timemachine for Visual Testing

XKCD Time Machine Time Machine by xkcd

A few days ago I added visual testing to our ReactJS-based components library.

Pretty early in the process, I encountered a consistency problem that caused false positive errors.
The reason was, several components are using the current date/time, thus failing the tests.

My first thought was going with the “naive” approach - using a constant datetime along all relevant components visual examples (stories in Storybook, for example). Aside from not being an elegant solution, it requires anyone who writes a component in the future to keep in mind using const date and time. Not easily maintainable.

That’s when I found timemachine.

It is aimed to “test your time-dependent app by monkey patching the Date function and overriding your system time”


To set a date:

  dateString: 'March 4, 2017 18:21:11'

If you’re using Storybook, add it to your .storybook/config.js

Now with every new call to Date:

console.log(new Date()); // March 4, 2017 18:21:11




$ npm install --save-dev timemachine


comments powered by Disqus