This is the example application of the talk in German language: "Visuelle Regressionstest in StoryBook". It was held at the DATEV Coding Festival on 29. July 2021.
Slides are available on: https://speakerdeck.com/rainerhahnekamp/visuelle-regressionstest-mit-storybook
In this application, we visually test components via a technique called visual regression. Two technologies are used to showcase it. First one is Jest with embedded Puppeteer, the second is Cypress with the cypress-plugin-snapshot.
holidays.component.spec-vr.ts
access the running Angular application on port
4200:
npm run start
npx jest --config jest.config-vr.js --testPathPattern holidays.component
holiday-card.component.spec-vr.ts
runs visual regression against a built
Storybook instance:
npm run storybook:build
npm run storybook:serve
npx jest --config jest.config-vr.js --testPathPattern holiday-card
storybook.spec.ts
uses Cypress for Visual Regression:
npm run storybook:build
npm run storybook:serve
npm run e2e:watch
(click on storybook.spec.ts after Cypress opened)