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.


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).



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.
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"



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