Widget TreeIntermediate30 XP3 min read
What is the difference between a widget test and a golden file test?
TL;DR: Widget tests verify widget structure and behavior via finder/matcher APIs. Golden tests render a widget to an image and compare against a saved 'golden' reference — catching visual regressions.
Full Answer
Both test types run in the Flutter test environment but serve different purposes.
| Aspect | Widget Test | Golden Test |
|---|---|---|
| What it checks | Widget structure, interactions, state | Pixel-level visual appearance |
| Assertion style | expect(find.text('X'), findsOneWidget) | matchesGoldenFile('name.png') |
| Maintenance | Low — rarely breaks | Higher — breaks on any visual change |
| CI requirement | No special setup | Needs --update-goldens to regenerate |
| Use case | Logic and structure verification | Design system component snapshots |
🎯
Run golden tests on a fixed platform (e.g., Linux CI) since font rendering differs between macOS/Windows/Linux. Use packages like golden_toolkit for better control.
Code Examples
dartGolden test example
Output
First run (--update-goldens): saves primary_button.png. Subsequent runs: compares pixels; fails on visual change.
Common Mistakes
- ✗Running golden tests on different OS/font environments — images differ, causing false failures
- ✗Not updating golden files after intentional design changes — golden tests fail forever
Interview Tip
💡
Mention that golden tests are most valuable in design systems where visual consistency across many components is critical.
#widget-test#golden-test#testing#UI-testing#screenshot