Skip to content

Commit b89c6e3

Browse files
fix(design-system): use mockdate in storybook tests instead of vi [AR-46279] (#124)
## Steps to reporoduce Navigate to [Storybook DateInput component](https://drivenets.github.io/design-system/?path=/docs/design-system-dateinput--docs). You'll see error: <img width="1554" height="734" alt="image" src="https://github.com/user-attachments/assets/2f5e5b47-bc26-4783-a5fd-bb924a974fa8" /> ## Root cause In a nutshell, importing from vitest `import { vi } from 'vitest';` breaks storybook. See details [here](storybookjs/storybook#31400 (comment)). ## Solution Use [mockdate](https://www.npmjs.com/package/mockdate) package to mock dates. I took the idea from [Storybook documentation](https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules#setting-up-and-cleaning-up). ### Alternative Solution I also considered [@sinonjs/fake-timers](https://www.npmjs.com/package/@sinonjs/fake-timers) package since it is more popular and in active development, but it's usage looks a bit more complicated and its size is 103 kB versus 13.8 kB of [mockdate](https://www.npmjs.com/package/mockdate) --------- Co-authored-by: Evyatar Daud <32631382+StyleShit@users.noreply.github.com>
1 parent 3524248 commit b89c6e3

3 files changed

Lines changed: 17 additions & 16 deletions

File tree

packages/design-system/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
"eslint-plugin-react-hooks": "^7.0.1",
9898
"eslint-plugin-storybook": "^10.2.4",
9999
"jsdom": "^25.0.1",
100+
"mockdate": "^3.0.5",
100101
"playwright": "^1.58.1",
101102
"postcss": "^8.5.6",
102103
"postcss-modules": "^6.0.1",

packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Meta, StoryObj } from '@storybook/react-vite';
22
import { useState } from 'react';
33
import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
4-
import { vi } from 'vitest';
4+
import MockDate from 'mockdate';
55
import DsDateInput from './ds-date-input';
66
import type { DsDateInputProps } from './ds-date-input.types';
77
import styles from './ds-date-input.stories.module.scss';
@@ -17,14 +17,12 @@ const meta: Meta<typeof DsDateInput> = {
1717
layout: 'centered',
1818
},
1919
beforeEach: () => {
20-
vi.useFakeTimers({
21-
// needed,
22-
shouldAdvanceTime: true,
23-
});
24-
vi.setSystemTime(MOCK_DATE);
20+
// We use mockdate here and not vi.useFakeTimers() because the latter is not compatible with Storybook.
21+
// See https://github.com/storybookjs/storybook/issues/31400#issuecomment-2943382690 for more details.
22+
MockDate.set(MOCK_DATE);
2523

2624
return () => {
27-
vi.useRealTimers();
25+
MockDate.reset();
2826
};
2927
},
3028
};

pnpm-lock.yaml

Lines changed: 11 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)