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 ):