This repository contains a demo project for visually testing Storybook components in a React front-end app with Applitools Eyes. Applitools Eyes will perform visual tests on Storybook components without the need to write any extra test code!
In fact, the main page of this app explains why components need visual testing. Run the app, open its main page, and start learning!
This project was created for the
Modern Cross Browser Testing for Storybook Components workshop
led by Pandy Knight
and hosted by Applitools.
The workshop abstract is provided in ABSTRACT.md.
Full instructions for the workshop are provided in WORKSHOP.md.
- Understanding our React app
- Manually testing Storybook components
- Preparing for visual testing
- Visually testing Storybook components
- Testing components across different browsers
- Adding visual tests to a development workflow
- An Applitools account (Register here for a free account)
- Node.js (This project was created with v16.13.1)
- A JavaScript IDE like Visual Studio Code
- Up-to-date versions of your favorite web browsers
To clone this repository:
git clone https://github.com/applitools/workshop-cbt-storybook.gitTo install the dependencies:
cd applitools-react-storybook-demo
npm installNote: This project was initially created using Create React App.
To launch the React app, run:
npm startThis command starts the app at http://localhost:3000/.
When it loads, you should see the home page,
which concisely explains the need for visual component testing.
To launch the Storybook viewer, run:
npm run storybookThis command starts the viewer at http://localhost:6006/.
When it loads, you should see components on the left navbar,
and the main part of the page should be a component viewer.
To launch visual tests using Applitools,
set the APPLITOOLS_API_KEY environment variable to your secret API key,
and then run:
npx eyes-storybook -s publicVisual test results will appear in the Applitools dashboard.