Visual Testing Handbook

Build bulletproof UI components

Visual testing is a pragmatic yet precise way to verify the look of UI components. It’s practiced by companies like Slack, Lonely Planet, and Walmart. This 31-page handbook gives you an overview of visual testing in React.
Book cover

So what’s visual testing?

Visual testing involves defining states of a component, then manually verifying that it renders correctly during testing.
1. Define states
2. Write tests to simulate component states
3. Verify states during testing

What’s inside

UIs are more complex, multi-state, and personalized than ever. Testing UI components helps you ensure consistency and prevent bugs.
shapes/arc
Why visual testing?
shapes/donut
What tools you need
shapes/rect
How visual testing fits into your workflow
shapes/tetrist
Hands-on tutorial
shapes/triangle
Automating visual testing