Skip to main content

Setting Up Visual Component Testing with Storybook

Getting Started with Storybook#

Get automated UI test results across your React, Vue or Angular components by integrating Storybook with Sauce Labs Visual Component Testing.

Follow the steps below to set up Component Testing with Storybook, or use the New Project Wizard.

What You'll Need#

  • Have Storybook installed.
  • Have some stories written for your components.
  • Ensure that you can successfully view your stories when running the Storybook Dev server (npm run storybook).

Install Screener Package#

Install the screener-storybook package as a dependency in your project:

npm install --save-dev screener-storybook

Save Screener Config File#

  1. Go to the New Project Wizard.
  2. Follow the wizard steps to generate your Screener Config code.
  3. Save the code into a file named screener.config.js in the root directory of your application.

We recommend securing your API Key by storing it as an environment variable (i.e., store it in an environment variable called SCREENER_API_KEY, then reference it in your screener.config.js file with process.env.SCREENER_API_KEY).

For additional configuration options, view the repository documentation

Add Screener Script#

Add the following NPM script to your package.json file:

"scripts": {  "test-storybook": "screener-storybook --conf screener.config.js"}

Run Your Tests#

You're all set! Now run your first test with the following command:

npm run test-storybook

View your initial results in the Screener Dashboard.

Next Steps#