Visual Testing For Component Libraries - Dominic Nguyen @ ReactNYC
Testing user interfaces has always been tricky. The details of UI are nuanced and subjective. “Does this look right?” Co-opting existing testing solutions like unit, E2E, and snapshot tests tends to be brittle and time-consuming. Visual testing takes a different approach. It focuses the human tester (you) on the exact components in the exact states that require attention. It turns out to be a pragmatic yet precise way to test component libraries. This presentation goes over why to consider visual testing, what tools are needed, and how it fits into your development process.
CONTENTS
0:05 - Intro
0:19 - Agenda
0:38 - Croma shameless plug
1:01 - “Does it look right?”
1:30 - UI testing has always been tricky
2:06 - Apps more complex than ever
2:35 - Average app: +50 components & hundreds of states
3:12 - Countless hours fixing bugs
3:45 - Minor tweaks cause major regressions
4:11 - Automation
4:36 - Unit tests
4:56 - Compare results
5:15 - Snapshot tests (Jest)
5:29 - Compare results
5:45 - Screenshot tests
5:56 - Compare results
6:11 - End-to-end tests
6:32 - Existing test solution are not suited for testing modern app UIs
7:06 - A picture is worth a 100 DOM elements
7:24 - Coverage and accuracy
7:34 - Modular UI is testable
8:09 - Visual Testing
8:35 - Date picker testing example
9:13 - “That sounds like a lot of work…”
9:47 - Component explorers: your new favorite testing tool
10:43 - Lives alongside your app
10:57 - Writing visual tests
11:20 - What are my open-source options?
11:50 - Who uses component explorers?
12:07 - Demo creating a visual test
13:03 - Step 1: Install
13:24 - Step 2: Build basic component
13:42 - Step 3: Build test cases
14:07 - Check tests in component explorer
14:20 - Build out implementation
15:05 - Check implementation agains design
15:28 - Step 5: Rinse and repeat
15:55 - Visual test advantages
17:19 - Taking it further
17:39 - Coverage, accuracy, reliability
17:54 - Visual snapshot testing
18:46 - Write visual tests in a component explorer
18:55 - Update component
19:07 - Run screenshot tests
19:11 - Catch changes
19:28 - Visually test and confirm changes
19:46 - Visual snapshot testing flow
20:18 - Build visual snapshot testing
21:08 - Visual Testing Handbook
21:44 - Chromatic
22:55 - Question: How do you handle animation?
RESOURCES
Chroma
http://hichroma.com
Visual Testing Handbook
https://blog.hichroma.com/introducing...
Storybook
https://storybook.js.org/