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.
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:
- GitHub Actions
- GitLab Pipelines
- Bitbucket Pipelines
- CircleCI
- Travis CI
- Jenkins
- Azure Pipelines
- Other CI providers
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.
Next: See the recommended Chromatic workflow
How tools work together affects your development speed. Learn the recommended Chromatic workflow.
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.