# Storybook के साथ Testing — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/hi/storybook/sb-testing

> Play functions से interaction tests लिखें, accessibility issues scan करें और stories में visual regression checks जोड़ें।

## Interactions के लिए Play function

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

## Play test लिखना

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

```tsx
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 करें।