<aside> ℹ️

Storybook Test has launched and the full documentation is available here: https://storybook.js.org/docs/writing-tests

</aside>

The Test addon is great for automating your UI tests within Storybook. To have full confidence in your work, backed by tests, you need to run those automated tests in your continuous integration (CI) environment.

Thankfully, that’s quite easy!

Set up Storybook Test in CI

Running Storybook tests in CI is very similar to running them in via CLI on your local machine: you run the same command, just in a different place.

Let’s go step-by-step to set things up.

1. Define package.json script

When you installed the Test addon, the following script was added to your package.json file:

// package.json
{ 
  "scripts": {
    "test-storybook": "vitest --project=storybook"
  }
}

This script calls the vitest CLI command and restricts it to the “storybook” project defined in your Vitest config, which was created when you installed the Test addon. (If you’ve renamed the project, adjust the script above accordingly.) You can also pass any additional vitest CLI options you may require.

If you don’t have this script, define it now as we’ll use it in our CI workflow.

2. Add a new CI workflow

Next, we’ll create a new “UI Tests” workflow to run in our CI environment. You may also adjust an existing workflow, if you prefer.

Here are some example configurations for popular CI providers: