flutter-add-widget-test
Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
By flutter · 31,758 installs
npx skills add flutter/agent-plugins --skill flutter-add-widget-test
Source repository · Upstream listing
Writing Flutter Widget Tests
Contents
[Setup & Configuration]( setup configuration)
[Core Components]( core components)
[Workflow: Implementing a Widget Test]( workflow implementing a widget test)
[Interaction & State Management]( interaction state management)
[Examples]( examples)
Setup & Configuration
Ensure the testing environment is properly configured before authoring widget tests.
1. Add the flutter test dependency to the dev dependencies section of pubspec.yaml .
2. Place all test files in the test/ directory at the root of the project.
3. Suffix all test file names with test.dart (e.g., widget test.dart ).
Core Components
Utilize the following flutter test components to interact with and validate the widget tree:
WidgetTester : The primary interface for building and interacting with widgets in the test environment. Provided automatically by the testWidgets() function.
Finder : Locates widgets in the test environment (e.g., find.text('Submit') , find.byType(TextField) , find.byKey(Key('submit btn')) ).
Matcher : Verifies the presence or state of widgets located by a Finder (e.g., findsOneWidget , findsNothing , findsNWidgets(2) , matchesGoldenFile ).
Workflow: Implementing a Widget Test
Copy the following checklist to track progress when implementing a new widget test.
Task Progress
[ ] Step 1: Define the test. Use testWidgets('description', (WidgetTester tester) async { ... }) .
[ ] Step 2: Build the widget. Call await tester.pumpWidget(MyWidget()) to render the UI. Wrap the widget in a MaterialApp or Directionality widget if it requires inherited directional or theme data.
[ ] Step 3: Locate elements. Instantiate Finder objects for the target widgets.
[ ] Step 4: Verify initial state. Use expect(finder, matcher) to validate the initial render.
[ ] Step 5: Simulate interactions. Execute gestures or inputs (e.g., await tester.tap(buttonFinder) ).
[ ] Step 6: Rebuild the tree. Call await tester.pump() or await tester.pumpAndSettle() to process state changes.
[ ] Step 7: Verify updated state. Use expect() to validate the UI after the interaction.
[ ] Step 8: Run and validate. Execute flutter test test/your test file test.dart .
[ ] Step 9: Feedback Loop. Review test output identify failing matchers adjust widget logic or test assertions re run until passing.
Interaction & State Management
Apply the following conditional logic based on the type of interaction or state change being tested:
If testing static rendering: Call await tester.pumpWidget() once, then immediately run expect() assertions.
If testing standard state changes (e.g., button taps):
1. Call await tester.tap(finder) .
2. Call await tester.pump() to trigger a single frame rebuild.
If testing animations, transitions, or asynchronous UI updates:
1. Trigger the action (e.g., await tester.drag(finder, Offset(500, 0)) ).
2. Call await tester.pumpAndSettle() to repeatedly pump frames until no more frames are scheduled (animation completes).
If testing text input: Call await tester.enterText(textFieldFinder, 'Input string') .
If testing items in a dynamic or long list: Call await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder) to ensure the target widget is rendered before interacting with it.
Examples
High Fidelity Widget Test Implementation
Target Widget ( lib/todo list.dart ):
Test Implementation ( test/todo list test.dart ):