How to Visually Test React Components Using Our Storybook SDK

React Storybook
React Storybook

Testing a Shared Library

$ git clone https://github.com/applitools/eyes-storybook-example.git
$ cd eyes-storybook-example
$ npm install
$ npm test
if (!onDayMouseEnter) onDayMouseEnter(day, e);
Tests failing due to a change in the code
Tests failing due to a change in the code

Functional Testing Cannot Catch Visual Problems

Visual Testing of a Shared Library

npm install eyes.storybook --save-dev
npx eyes-storybook
Getting the Applitools API Key
Getting the Applitools API Key
// Mac, Linux:
$ export APPLITOOLS_API_KEY=your-api-key
// Window
C:> set APPLITOOLS_API_KEY=your-api-key
npx eyes-storybook
Visual testing results
Visual testing results

Failing the Test

Showing diffs of components in Storybook
Showing diffs of components in Storybook
  • Creating and documenting a shared ReactJS components library, with little effort.
  • Testing that the functionality of the components works (albeit with lots of effort)
  • Visually testing the components with literally zero code.

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Applitools

Applitools

Deliver visually perfect web and mobile apps with AI-powered end-to-end visual testing & monitoring. Get started, free: http://bit.ly/ApplitoolsFree