In this article, we explore Widget Testing With Flutter. We will implement a demo of widget testing for our Flutter application, and why do we need test cases for our application?.
Testing is a very important phase in the development life cycle of an application. It ensures that the application is of high quality. Testing requires careful planning and execution. This is the most time-consuming phase of development.
Dart language and Flutter framework provide extensive support for the automated testing of an application.
Before we get started I urge you to check out our Flutter app development company page.
Let’s Get Started
Implementation:
Steps to Implement Widget Testing
Step 1: Add the dependencies
Add the
flutter_testdependency to pubspec — yaml file.
|
1 2 3 |
dev_dependencies: flutter_test: sdk: flutter |
Step 2: Create a widget to test.
main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class MyAppWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( appBar: AppBar( title: Text( "MyText", key: const Key("text"), ), ), body: Center( child: Text("message"), ), ), ); } } |
Step 3: Create a testWidgets test.
widget_test.dart
|
1 2 3 4 5 6 7 8 9 10 |
void main() { // Define a test. The TestWidgets function also provides a WidgetTester // to work with. The WidgetTester allows you to build and interact // with widgets in the test environment. // MyAppWidgetTesting is stateless widget testWidgets('MyWidget has a title and message', (WidgetTester tester) async { // Test code goes here. }); } |
Step 4: Build the widget using the WidgetTester.
inside the main function
|
1 2 3 4 5 6 |
void main() { // MyAppWidgetTesting is stateless widget testWidgets("MyAppWidgetTesting", (WidgetTester tester) async { await tester.pumpWidget( MyAppWidget()); });<code> } |
Note: After the initial call to pumpWidget(), the WidgetTester provides additional ways to rebuild the same widget. This is useful if you’re working with a StatefulWidget or animations.
For eg: tapping a button calls setState(), and flutter won’t automatically rebuild your widget in a test environment.
Step 5: Search for the widget using a Finder.
|
1 2 3 4 5 6 7 |
void main() { testWidgets('MyAppWidgetTesting', (WidgetTester tester) async { await tester.pumpWidget( MyAppWidget()); // Create the Finders. expect(find.text("MyText"), findsOneWidget);<code> }); } |
Step 6: Verify the widget using a Matcher.
|
1 2 3 4 5 6 |
testWidgets('finds a specific instance', (WidgetTester <em>tester</em>) async { const keyFinder = Key("text"); await <em>tester</em>.pumpWidget(MaterialApp(<em>key</em>: keyFinder, <em>home</em>: Container())); // Find the MaterialApp widget using the testKey. expect(<strong>find</strong>.byKey(keyFinder), <strong>findsOneWidget</strong>); }); |
Why Test cases?:
We compose test cases for our application. Because we need our application bug-free and fulfilled.
The application necessities before publishing our work to the client. The client doesn’t need a terrible item. To stay away from it we test our application by composing the test cases.
A definition from Software Testing Fundamentals test cases is a bunch of conditions under which an analyzer will decide if an application fulfills necessities or works accurately. The way towards developing test cases can also help us to discover issues. In an application’s necessities or design.
Conclusion:
In this article, I have explained the basic structure of Widget Testing in a flutter; you can modify this code according to your choice. This was a small introduction to Widget Testing With Flutter On User Interaction from my side, and it’s working using Flutter.
That’s all for today.
If you want to learn more about widget testing in flutter please go and check their flutter official page:
https://docs.flutter.dev/testing
You can read more blogs from Mobikul on this website: https://mobikul.com/blog/
Be the first to comment.