Run any Skill in Manus with one click

Get Started

flutter-golden-testing

Stars2

Forks1

UpdatedJune 10, 2026 at 12:27

Step-by-step workflow for creating, configuring, and updating Flutter golden tests using the Alchemist package.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

anoopsg

anoopsg/agent_rules

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software Quality Assurance Analysts and TestersComputer and Mathematical Occupations·SOC 15-1253

SKILL.md

readonly

name	flutter-golden-testing
description	Step-by-step workflow for creating, configuring, and updating Flutter golden tests using the Alchemist package.

Flutter Golden Testing Skill

This skill outlines the step-by-step process for implementing and updating golden tests for Flutter widgets.

Step 1: Validation & Setup

Check Dependencies: Ensure alchemist is present in the dev_dependencies of pubspec.yaml. If it is missing, install it:
```
flutter pub add --dev alchemist
```
Directory Structure: Create a goldens/ directory adjacent to your target test file to store the generated .png reference files.

Step 2: Test Scaffolding

Create the test file named [widget_name]_test.dart (or [widget_name]_golden_test.dart).

Imports: Import the necessary packages (package:flutter_test/flutter_test.dart and package:alchemist/alchemist.dart).
Setup Fonts/Assets: Call loadAppFonts() (if applicable) before running the tests to prevent text from rendering as the Ahem font.

Step 3: Implementation

Implement the test using alchemist APIs instead of the standard testWidgets.

Use goldenTest: Define your test using the goldenTest function.
Mock Externalities:
- Disable or replace infinite animations (e.g., CircularProgressIndicator).
- Mock network image requests (e.g., using mocktail_image_network or network_image_mock).
Matrix Testing: Use GoldenTestGroup and GoldenTestScenario to lay out all possible widget states (e.g., loading, success, error) and variations (light/dark mode, text scaling) within a single test execution.

Step 4: Generation and Verification

Generate Goldens: Run the following command to generate or update the reference images:
```
flutter test --update-goldens
```
Verify Output: Check that the .png files were correctly generated in the goldens/ directory.
Gitignore Failures: Ensure **/failures/ is in the project's .gitignore so test failure artifacts are not accidentally committed.

Step 5: Updating Existing Goldens

If you are modifying an existing widget that already has golden tests, run the update command (flutter test --update-goldens) to regenerate the images. Never modify the .png files manually.

More from this repository

same repository

provide-mock-data

anoopsg/agent_rules

Process for creating mock data sources in the infrastructure layer.

2026-06-242

create-ui-widget

anoopsg/agent_rules

Process for building, exporting, and registering reusable UI components in the packages/app_ui package. References design-to-code.md for design tokens (typography, colors, spacing).

2026-06-162

design-to-code

anoopsg/agent_rules

Outlines the process for converting Figma designs into a structured, platform-aware Flutter implementation.

2026-06-162

remove-web-platform

anoopsg/agent_rules

Use when completely removing the web platform from the project. Details how to delete directories/configurations, clean up app_ui web components, remove web-specific feature views (*_view_web.dart), prune conditional imports/logic, and run validation.

2026-06-162

manage-routes

anoopsg/agent_rules

Use when asked to add, update, or group routes using GoRouter, or manage redirection guards.

2026-06-122

create-feature

anoopsg/agent_rules

Use when asked to create a new feature or sub-feature following the DDD-lite architecture, or set up state, view, and page layers for a domain.

2026-06-052

Flutter Golden Testing Skill

This skill outlines the step-by-step process for implementing and updating golden tests for Flutter widgets.

Step 1: Validation & Setup

Check Dependencies: Ensure alchemist is present in the dev_dependencies of pubspec.yaml. If it is missing, install it:

flutter pub add --dev alchemist

Directory Structure: Create a goldens/ directory adjacent to your target test file to store the generated .png reference files.

Step 2: Test Scaffolding

Create the test file named [widget_name]_test.dart (or [widget_name]_golden_test.dart).

Imports: Import the necessary packages (package:flutter_test/flutter_test.dart and package:alchemist/alchemist.dart).

Setup Fonts/Assets: Call loadAppFonts() (if applicable) before running the tests to prevent text from rendering as the Ahem font.

Step 3: Implementation

Implement the test using alchemist APIs instead of the standard testWidgets.

Use goldenTest: Define your test using the goldenTest function.

Mock Externalities:

Disable or replace infinite animations (e.g., CircularProgressIndicator).
Mock network image requests (e.g., using mocktail_image_network or network_image_mock).

Matrix Testing: Use GoldenTestGroup and GoldenTestScenario to lay out all possible widget states (e.g., loading, success, error) and variations (light/dark mode, text scaling) within a single test execution.

Step 4: Generation and Verification

Generate Goldens: Run the following command to generate or update the reference images:

flutter test --update-goldens

Verify Output: Check that the .png files were correctly generated in the goldens/ directory.

Gitignore Failures: Ensure **/failures/ is in the project's .gitignore so test failure artifacts are not accidentally committed.

Step 5: Updating Existing Goldens

If you are modifying an existing widget that already has golden tests, run the update command (flutter test --update-goldens) to regenerate the images. Never modify the .png files manually.