Storybook · Writing and testing · all subjects

snapshot testing

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Snapshot testing definition and purpose

Snapshot testing involves rendering a component in a given state, taking a snapshot of the rendered DOM or HTML, and comparing it against the previous snapshot. They are convenient to create but can be difficult and noisy to maintain if the snapshot contains too much information.

When snapshot testing is appropriate

For UI components, visual tests (easier to review) or interaction tests (focused on functionality) are usually the better fit than snapshot tests. However, snapshot testing may be necessary in some cases, such as ensuring an error is thrown correctly.

Portable Stories API for snapshot testing

Storybook provides the Portable Stories API to enable snapshot testing within another test environment like Jest or Vitest. The Portable Stories API composes your stories with their annotations (args, decorators, parameters, etc.) and produces a renderable element for your tests. Portable Stories are available for Vitest and Jest.

Storyshots is deprecated

Storyshots is deprecated and no longer maintained. The Portable Stories API is recommended as a replacement for snapshot testing.

Storybook Test includes Portable Stories configuration

If you are using Storybook Test, your project is already configured to use Portable Stories in Vitest.

Snapshot testing with Portable Stories process

Snapshot testing a reusable story is a straightforward process of using `composeStories` from the Portable Stories API to get a renderable element, rendering that element, and then taking and comparing a snapshot.

Example: snapshot test with Portable Stories in Vitest

The pattern for snapshot testing with Portable Stories in Vitest is to import `composeStories` from '@storybook/react', use `composeStories` to extract the story from the stories file, render the story, and then compare the snapshot. For example: `const { ButtonStory } = composeStories(stories); render(ButtonStory.run()); expect(asFragment()).toMatchSnapshot();`

Using tags to exclude stories from Storybook sidebar and tests

Stories can use the `tags` property with values like '!dev' to exclude from the Storybook sidebar and '!test' to prevent testing by Storybook Test.

Snapshot testing to verify errors are thrown

Snapshot testing can be used to verify that an expected error is thrown correctly. A story can apply a prop via `args` that triggers an error, and a test can then assert using `await expect(Story.run()).rejects.toThrowError('error message')`.

Snapshot testing with test-runner as alternative

If Portable Stories cannot be used in a project, snapshot tests can still be run using the test-runner. Instructions are available in the test-runner documentation for setting up snapshot tests.

Difference between snapshot tests and visual tests

Visual tests capture images of stories and compare them against image baselines. Snapshot tests take DOM or HTML snapshots and compare them against DOM or HTML baselines. Visual tests are better suited for verifying appearance. Snapshot tests are useful for validating non-visual output and ensuring the DOM doesn't change.

Give your agent this brain