# storybook-chromatic > Visual Testing for Storybook Latest version **4.0.2** (published 2020-04-29) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install storybook-chromatic pnpm add storybook-chromatic yarn add storybook-chromatic bun add storybook-chromatic ``` Provides the commands `chroma`, `chromatic`, `chromatic-cli`. ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 4.0.2 | | Published | 2020-04-29 | | First published | 2018-03-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 38 | | Unpacked size | 165.1 KB | | Known vulnerabilities | 0 (+3 in 2 direct dependencies) | | Install scripts | no | | GitHub stars | 339 | | Maintainers | ndelangen, tmeasday | ## Links - npm: https://www.npmjs.com/package/storybook-chromatic - Repository: https://github.com/chromaui/chromatic-cli - Homepage: https://github.com/chromaui/chromatic-cli#readme - Issues: https://github.com/chromaui/chromatic-cli/issues - npm.io page: https://npm.io/package/storybook-chromatic ## Dependencies (38) - [esm](https://npm.io/package/esm.md) ^3.2.25 - [tmp](https://npm.io/package/tmp.md) ^0.1.0 - [jest](https://npm.io/package/jest.md) ^25.2.7 - [meow](https://npm.io/package/meow.md) ^6.1.0 - [pino](https://npm.io/package/pino.md) 5.17.0 - [uuid](https://npm.io/package/uuid.md) ^7.0.3 - [debug](https://npm.io/package/debug.md) ^4.1.1 - [jsdom](https://npm.io/package/jsdom.md) 16.2.2 - [slash](https://npm.io/package/slash.md) ^3.0.0 - [dotenv](https://npm.io/package/dotenv.md) ^8.2.0 - [env-ci](https://npm.io/package/env-ci.md) ^5.0.2 - [is-url](https://npm.io/package/is-url.md) ^1.2.4 - [npmlog](https://npm.io/package/npmlog.md) ^4.1.2 - [pkg-up](https://npm.io/package/pkg-up.md) ^3.1.0 - [semver](https://npm.io/package/semver.md) ^7.1.3 - [fake-tag](https://npm.io/package/fake-tag.md) ^2.0.0 - [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.0 - [jsonfile](https://npm.io/package/jsonfile.md) ^6.0.1 - [node-ask](https://npm.io/package/node-ask.md) ^1.0.1 - [progress](https://npm.io/package/progress.md) ^2.0.3 - [denodeify](https://npm.io/package/denodeify.md) ^1.2.1 - [minimatch](https://npm.io/package/minimatch.md) ^3.0.4 - [tree-kill](https://npm.io/package/tree-kill.md) ^1.2.2 - [ts-dedent](https://npm.io/package/ts-dedent.md) ^1.1.1 - [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.0 - [async-retry](https://npm.io/package/async-retry.md) ^1.3.1 - [cross-spawn](https://npm.io/package/cross-spawn.md) ^7.0.2 - [strip-color](https://npm.io/package/strip-color.md) ^0.1.0 - [yarn-or-npm](https://npm.io/package/yarn-or-npm.md) ^3.0.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.9.2 - [util-deprecate](https://npm.io/package/util-deprecate.md) ^1.0.2 - [progress-stream](https://npm.io/package/progress-stream.md) ^2.0.0 - [enhanced-resolve](https://npm.io/package/enhanced-resolve.md) ^4.1.1 - [node-loggly-bulk](https://npm.io/package/node-loggly-bulk.md) ^2.2.4 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.9.4 - [rotating-file-stream](https://npm.io/package/rotating-file-stream.md) ^2.0.2 - [@chromaui/localtunnel](https://npm.io/package/@chromaui/localtunnel.md) 2.0.1 - [babel-plugin-require-context-hook](https://npm.io/package/babel-plugin-require-context-hook.md) ^1.0.0 ## Recent versions - 4.0.2 (latest) — 2020-04-29 - 3.5.1-alpha.1 (alpha) — 2020-02-05 - 3.0.3-debug.0 (debug) — 2019-10-15 - 3.0.0-rc.0 (rc) — 2019-10-03 - 1.0.3-beta.0 (beta) — 2018-10-07 - 3.5.5 — 2020-04-24 - 3.5.4 — 2020-04-24 - 3.5.3 — 2020-04-14 - 3.5.2 — 2020-02-17 - 3.5.1 — 2020-02-05 - 3.5.1-alpha.0 — 2020-02-05 - 3.5.0 — 2020-01-28 - 3.4.1 — 2019-12-03 - 3.4.0 — 2019-11-25 - 3.3.0 — 2019-11-25 - … 48 more at https://npm.io/package/storybook-chromatic/versions ## README # Chromatic CLI Publishes your Storybook to Chromatic and kicks off tests if they're enabled. ## Install ```sh yarn add chromatic ``` ## Usage You can use this package normally, which means installing it and adding a script called `chromatic` to your `package.json` ``` "chromatic": "chromatic", ``` But alternatively (and this is useful for testing) you can use npx: **Use a git branch**: ```sh npx -p chromaui/chromatic-cli#master chromatic --dev ``` **Use a debug version on npm**: ```sh npx -p chromatic chromatic ``` Using npx has pros and cons: - 👍 You'll never be out of date, you'll use the latest version every time, never have to worry about upgrading this. - 👍 You don't need this package as a dependency, and don't need to install it during local development - 👎 This will add a delay when you actually do want to run this, like in your CI, delaying feedback. ### Usage in a github action There are examples here: [/.github/workflows](/.github/workflows). Do not run this based on a github pull_request event. If you do, the commit and branch will get reported wrong, use [https://github.com/chromaui/action](https://github.com/chromaui/action) instead. ### Main options ``` --project-token="" ``` You can also use the environment variable: `CHROMATIC_PROJECT_TOKEN` ### Storybook options ``` --build-script-name [name], -b The npm script that builds your Storybook [build-storybook] --storybook-build-dir, -d Provide a directory with your built storybook; use if you've already built your storybook ``` Deprecated options (for tunneled builds): ``` --script-name [name], -s The npm script that starts your Storybook [storybook] --exec , -e Alternatively, a full command to run to start your storybook --do-not-start, -S Don't attempt to start or build; use if your Storybook is already running --storybook-port , -p What port is your Storybook running on (auto detected from -s, if set) --storybook-url , -u Storybook is already running at (external) url (implies -S)' --storybook-https Use if Storybook is running on https (auto detected from -s, if set) --storybook-cert Use if Storybook is running on https (auto detected from -s, if set) --storybook-key Use if Storybook is running on https (auto detected from -s, if set) --storybook-ca Use if Storybook is running on https (auto detected from -s, if set) ``` These options are not required, this CLI is 0-config if you have a `build-storybook` script in your `package.json`. ### Chromatic options ``` --allow-console-errors Continue running chromatic even if some stories throw an error --auto-accept-changes [branch] Accept any (non-error) changes or new stories for this build [only for if specified]' --exit-zero-on-changes [branch] Use a 0 exit code if changes are detected (i.e. don't stop the build) [only for if specified] --exit-once-uploaded [branch] Exit with 0 once the built version has been sent to chromatic [only for if specified] --ignore-last-build-on-branch [branch] Do not use the last build on this branch as a baseline if it is no longer in history (i.e. branch was rebased) [only for if specified]' --preserve-missing Treat missing stories as unchanged (as opposed to deleted) when comparing to the baseline' --no-interactive Do not prompt for package.json changes --only Only run a single story or a glob-style subset of stories (for debugging purposes ``` ### Debug options ``` --skip Skip chromatic tests (mark as passing) --list List available stories (for debugging purposes) --ci This build is running on CI, non-interactively (alternatively, pass CI=true) --debug Output more debugging information ``` ### Environment variables This package will load any variables from a `.env` file if present ## Issues If you encounter issues with the CLI please report them via the in-app chat (Intercom widget) or at https://github.com/chromaui/chromatic-cli/issues. Thanks! ## Contributing Because of the nature of this package: it being a connector between Storybook and a web service, you may need a project token to test this locally. Just send us a message at `opensource@hichroma.com` or sign up for an account! All contributions are welcome! ## Future plans: - We'd like to unify this so there's just a single package on npm. - Migrate to Typescript - Deprecate all the Storybook options in favor of a sane `--config` flag ## Publishing to npm We publish with a script: ```sh ./scripts/publish.js ``` You can pass any flags to this you'd normally be able to pass to `npm publish`, such as `--dry-run` or `--tag="alpha"`. Before publishing we check if the current user has permissions and if the version isn't already on npm ## Compatibility & versioning Compatibility is guaranteed between this package and Chromatic like so: - Production Chromatic ensures it’s compatible with what’s on npm - What's on the master branch is equal to what's published on npm - This package ensures it’s compatible with production Chromatic To facilitate upgrading in the future, removing and adding features, this is the process: - Any new features will have to be on Chromatic production before they could be used in this package - We can add feature flags to be able to test new functionality - Chromatic production can not remove any features this package depends on until after the usage has been removed from this package in addition to a grace period to allow users to upgrade --- _Source: https://npm.io/package/storybook-chromatic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._