ALT The file Dashboard.stories.ts containing the code: import { mocked } from 'storybook/test'; import { trackEvent } from '../lib/analytics.ts'; export const MyStory = { beforeEach: () => { /* * The `trackEvent` function is already a mock! * The `mocked` utility is just for proper mock function types */ mocked(trackEvent).mockResolvedValue({ status: 'ok' }); }, play: async () => { // ... interact with the component await expect(trackEvent).toHaveBeenCalledWith('dashboard-viewed'); }, };

ALT The file .storybook/preview.ts containing the code: import { sb } from 'storybook/test'; // Replaces imports with `../lib/__mocks__/analytics.js`, if found sb.mock('../lib/analytics.ts'); // Works for external modules, too: `/__mocks__/uuid.js` sb.mock('uuid');

ALT The file .storybook/preview.ts containing the code: import { sb } from 'storybook/test'; // Automatically replaces imports from this module with mocked versions sb.mock('../lib/analytics.ts'); // Works for external modules, too sb.mock('uuid');

ALT The file Dashboard.stories.ts containing the code: import { mocked } from 'storybook/test'; import { trackEvent } from '../lib/analytics.ts'; export const MyStory = { beforeEach: () => { /* * The `trackEvent` function is already a mock! * The `mocked` utility is just for proper mock function types */ mocked(trackEvent).mockResolvedValue({ status: 'ok' }); }, play: async () => { // ... interact with the component await expect(trackEvent).toHaveBeenCalledWith('dashboard-viewed'); }, };

ALT tj-pitre-ai-design-systems-webinar

ALT automated vs manual a11y testing webinar

ALT automated vs manual a11y testing webinar

ALT Storybook's test widget, divided into three sections. First is "Run component tests, testing... 1/97" with an eye icon and a progress indicator circling a stop icon. Underneath are checkboxes labeled Interactions, Coverage, and Accessibility. Next is "Run visual tests in the cloud" with a play icon. Last is "Run tests" with a downward pointing chevron.