---
schema_version: "1"
id: 581a8b0de1249622ef47f7a5bc919b58ccfe1cd0096b9df72755a6137f715bf3
title: Test Components in Storybook
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-storybook-test.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-storybook-test.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 0baf644bda9ebbbe7da8d0026a2ab13b6567a4c458a05dff67e3f20927ade372
products:
  - Composable Storefront
  - Salesforce APIs
---
# Test Components in Storybook

Test components in the browser by using stories. View stories and their automated tests in the Storybook component library, or run tests via the command line.

## Create a Snapshot with the Snapshot Test

The snapshot is the base copy of the components, their properties, labels, and behaviors. Tests use the snapshot to compare component changes. If a test fails, it can indicate a regression bug or an intended change. After making component changes or adding new components, update the snapshot so it becomes the new base for future tests.

To create a snapshot, run this command.

```
pnpm test-storybook:snapshot
```

To update a snapshot, run this command.

```
pnpm test-storybook:snapshot:update
```

## Run Interaction Tests

An interaction test verifies that a component behaves correctly when a user interacts with it through clicks, typing, and hovers. It simulates these actions within the isolated Storybook environment, often by using the play function and testing library for powerful, reliable component testing.

To run an interaction test in the browser, click a story under a component. The interaction tests for that component run and show the results.

![Storybook Address Card component testing in the browser](https://developer.salesforce.com/docs/media/sfnext/sfnext-storybook-address-card.png '{"class": "image-xl"}')

To run interaction tests via the command line, use this command.

```
pnpm test-storybook:interaction
```

## Run Accessibility Tests

Storybook accessibility tests check for Web Content Accessibility Guidelines (WCAG) violations in a component. They help you catch accessibility issues in a component and report issues like low contrast, missing alt text, and keyboard navigation problems during development. Accessibility tests help make sure that components are usable by everyone, even simulating vision impairments like color blindness.

To run an accessibility test in the browser, click a story under a component. The accessibility tests for that component run and show the results.

To run accessibility tests via the command line, use this command.

```
pnpm test-storybook:a11y
```

## See Also

- [GitHub: Storybook Readme](https://github.com/SalesforceCommerceCloud/storefront-next-template/blob/latest/docs/README-STORYBOOK.md)
- [Build and Test Components with Storybook](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-storybook.md)