https://github.com/netsells/storybook-mockdate
https://github.com/netsells/storybook-mockdate
Last synced: 30 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/netsells/storybook-mockdate
- Owner: netsells
- Created: 2021-02-16T10:36:31.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T13:24:32.000Z (about 1 year ago)
- Last Synced: 2025-03-24T20:11:19.428Z (about 2 months ago)
- Language: JavaScript
- Size: 65.4 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @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
```sh
$ yarn add -D @netsells/storybook-mockdate
```
## Usage
### Setup
Provide the decorator in your storybook decorators config:
```js
import withMockdate from '@netsells/storybook-mockdate';
export default [
withMockdate,
];
```
### Stories
To lock your stories at a specific date, you can simply provide the `mockdate` parameter with your date:
```js
export default {
parameters: {
mockdate: new Date('2020-01-14T15:47:18.502Z'), // Any date contructor format will work
},
};
```
You can also provide a date to specific stories if required:
```js
export const myComponent = {
parameters: {
mockdate: new Date('2020-01-14T15:47:18.502Z'), // Any date contructor format will work
},
};
```