What are golden tests in Flutter and when should you use them?
TL;DR: Golden tests (screenshot tests) render a widget and compare it pixel-by-pixel against a reference image (the 'golden' file). Use for: design system components, complex UI that's hard to assert with finders, visual regression detection after refactors.
Full Answer
Golden tests catch visual regressions that functional tests miss. If you move a padding by 4px or change a font weight, unit tests won't catch it — but a golden test will.
When to use goldens
- ▸Design system components: Button variants, Card layouts, Typography
- ▸Complex rendering: charts, custom painters, Rive animations
- ▸Dark/light theme: ensure both themes render correctly
- ▸Responsive breakpoints: verify layout changes at mobile/tablet/desktop sizes
Golden tests are platform-specific — a golden generated on macOS will fail on Linux CI because font rendering differs. Use golden_toolkit package with consistent fonts, or run goldens in a Docker container matching CI.
Code Examples
// First run: generates golden PNG files in test/goldens/ // Subsequent runs: pixel-by-pixel comparison // Diff on failure: shows red pixels where rendering changed // --update-goldens: regenerate after intentional UI changes
Common Mistakes
- ✗Running goldens without consistent fonts — platform-specific rendering causes CI failures
- ✗Committing goldens generated on different OS than CI — mismatches on every run
Interview Tip
Golden tests are often called 'screenshot tests'. The golden_toolkit package by eBay is the standard — it provides loadAppFonts() for cross-platform consistency. Mention that goldens must be updated when you intentionally change UI.