Getting Started with Screener + React Storybook

Get Automated Visual Testing across your React components with Storybook and Screener.

Follow the steps below to setup Screener with React Storybook, or use the New Project Wizard.


1

Verify Requirements

  1. React Storybook v2.17+ is installed.
  2. You have written some stories for your React components.
  3. You can successfully view your stories when running the Storybook Dev server
    (npm run storybook).

2

Install

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

npm install --save-dev screener-storybook

3

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.
For additional configuration options, view the repository documentation.

4

Add Screener Script

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

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

5

Run

Great, 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


Got Questions? Ask Us