How to set up a pipeline with visual unit tests for your app
summary
Shows how to get deterministic visual unit tests for React by rendering components to HTML and comparing image buffers rather than full end-to-end runs, using Jest and Puppeteer with JSDOM and image-snapshot integration, attaching results to Allure report, and running a CI-driven pipeline on CircleCi and GitHub that keeps baselines owned by CI and requires an approval job to update them. Screenshots render in ~350ms, 100 comparisons take ~20s, 300 generated baselines run in <24s, and excluded zones or CSS overrides handle real-device noise (BrowserStack optional).
AI-written summary · about
chapters (28)
- 0:00Intro
- 0:30About The Sun
- 0:56What is The Sun
- 1:09What are visual unit tests
- 2:20Why do we need such tests
- 2:57TestRunner
- 3:35Reporting plugin
- 3:55Interactive demo
- 4:25Dont rush
- 4:39Common scenario
- 5:26Implementation
- 7:19Plugins
- 8:32Configuration
- 10:09Environment
- 10:24Global Setup
- 11:19Screenshot Helper
- 11:41Examples
- 12:29Performance
- 14:05Browser
- 14:31WebDriver
- 17:19Problems
- 18:43Setup test environment file
- 19:07Update snapshots manually
- 20:35Create additional job
- 21:12Demo
- 23:58Easter eggs
- 24:09Disable animations
- 25:56Questions
related talks
58mUnit Testing with Screenshots: Breaking the Sound Barrier
32mCrafting a Bulletproof testing pipeline for React Apps
27mVisual UI Testing – Testing the Last Mile
29mShifting-left and Right to Test a web app with CI
21mLet's get visual - Visual testing in your Vue application
42mHow Visual AI Makes Testing Easy
30mTesting presentation components visually
34mI See What is Going on: Visual Testing for Your Components