Automate with continuous integration

Configure CI to publish your Storybook and run Chromatic’s automation whenever you push code. Badge your PRs to get notified about test and review results.

Continuous integration

Configure CI

Before we begin, make sure you set the CHROMATIC_PROJECT_TOKEN environment variable (sometimes referred to as “secrets”) in your CI service’s configuration. Add a chromatic script to your package.json if you don’t have one already, and make sure chromatic is listed in devDependencies.

"scripts": {
  "chromatic": "chromatic --exit-zero-on-changes"
}

Integrate with popular CI tools like you would any other job. Run npm run chromatic to publish your Storybook. If UI Test or UI Review are enabled, it will return a non-zero exit code when there are changes. For example:

- run:
    command: npm install # install dependencies
- run:
    command: npm test # run your unit tests
- run:
    command: npm run chromatic # publish Storybook and run visual tests

Here’s how we recommend configuring Chromatic for popular CI services:

Pull request checks

When a build runs it will automatically add a PR status check to the current pull request indicating the state of the build. By default, you’ll see Storybook Publish. If you enabled UI Tests or UI Review you’ll also see their respective checks.

GitHub, Bitbucket, or GitLab projects that are linked to a repository get this feature out of the box. If you use other version control services to host your code, you can write a custom CI script to add a check for Chromatic (via your CI provider).

Require checks in GitHub, GitLab, or Bitbucket to ensure they are completed before merging.

PR badges


How tools work together affects your development speed. Learn the recommended Chromatic workflow.

Read next chapter


Frequently asked questions

Can I hide the CI messages in the web app?

Chromatic detects CI test runs for most services. But it’s not possible for every system, which results in users seeing persistent “Setup CI / Automation” messages in the UI.

If this is happening to you, prepend CI=true to your test command like so CI=true yarn chromatic... to hide the “Setup CI” messages in Chromatic. Learn more.