Socket
Socket
Sign inDemoInstall

@chromatic-com/storybook

Package Overview
Dependencies
5
Maintainers
11
Versions
356
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @chromatic-com/storybook

Catch unexpected visual changes & UI bugs in your stories


Version published
Maintainers
11
Install size
7.83 MB
Created

Readme

Source

Visual Tests Addon for Storybook

Run visual tests on your stories and compare changes with the latest baselines to catch UI regressions early in development. Supports multiple viewports, themes, and browsers.

Prerequisites

  • Chromatic account configured with access to a project
  • Storybook 7.6 or later

Getting Started

Run the following command to install the addon and automatically configure it for your project via Storybook's CLI:

npx storybook add @chromatic-com/storybook

Start Storybook and navigate to the Visual Tests panel to run your first visual test with Chromatic!

Configuration

By default, the addon offers zero-config support to run visual tests with Storybook and Chromatic. However, if you need, you can customize it by providing a few options. See the Chromatic documentation for more information on configuring and using it with your Storybook.

Getting Help

If you have any questions or need help with the addon, please get in touch with the Chromatic team. Sign in to your Chromatic account and click the chat icon in the bottom right corner of the screen to start a conversation with us.

Contributing

We welcome contributions! If you're a maintainer, refer to the following instructions to set up your development environment with Chromatic.

Updating the GraphQL schema

The addon uses the Chromatic public GraphQL API. We rely on its schema to generate type definitions. The schema needs to be manually updated whenever it changes. To update, take https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql and save it under src/gql/public-schema.graphql.

Troubleshooting

Running Storybook with the addon enabled throws an error

When installed, running Storybook may lead to the following error:

const stringWidth = require('string-width');

Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.

This is a known issue when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can upgrade to the latest stable version. However, if you cannot upgrade, adjust your package.json file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your node_modules directory and yarn.lock file before installing the dependencies again.

 "resolutions": {
    "jackspeak": "2.1.1"
  }

Alternatively, you could use a different package manager (npm, pnpm).

License

MIT

Keywords

FAQs

Last updated on 28 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc