Storybook के साथ Testing

Interactions के लिए Play function

play function story render होने के बाद चलता है। यह Testing Library से user interactions simulate करता है और @storybook/test से result assert करता है।

Play test लिखना

यहाँ play function के साथ user interactions को test करने का एक उदाहरण है।

import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { Button } from './Button';

const meta = { component: Button, title: 'Components/Button' } satisfies Meta<typeof Button>;
export default meta;

export const Clicked: StoryObj<typeof meta> = {
  args: { children: 'Click me', onClick: fn() },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
    await expect(args.onClick).toHaveBeenCalled();
  },
};

Accessibility testing

Accessibility issues के लिए स्वचालित रूप से stories को scan करने के लिए a11y addon का use करें और WCAG guidelines को follow करें।

Screenshot testing

Changes के across component screenshots को capture और compare करने के लिए Percy या Chromatic जैसे visual testing tools का use करें।