@netsells/storybook-mockdate

This package provides an easy and convenient way to lock your stories at a specific date. This is important in cases where you are performing automated Visual Regression Testing, and a change in date/time may cause false failures.

Not only will this lock your stories at a specific date, it will also display that date as an overlay on your story to show the date being mocked.

This decorator is compatible with Vue and React stories.

Installation

1$ yarn add -D @netsells/storybook-mockdate

Usage

Setup

Provide the decorator in your storybook decorators config:

1import withMockdate from '@netsells/storybook-mockdate';
2
3export default [
4    withMockdate,
5];

Stories

To lock your stories at a specific date, you can simply provide the mockdate parameter with your date:

1export default {
2    parameters: {
3        mockdate: new Date('2020-01-14T15:47:18.502Z'), // Any date contructor format will work
4    },
5};

You can also provide a date to specific stories if required:

1export const myComponent = {
2    parameters: {
3        mockdate: new Date('2020-01-14T15:47:18.502Z'), // Any date contructor format will work
4    },
5};