Widget Testing in Flutter

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.

Let’s Get Started

Implementation:

Steps to Implement Widget Testing

Step 1: Add the dependencies

Add the flutter_test dependency to pubspec — yaml file.

dev_dependencies:
  flutter_test:
    sdk: flutter

dev_dependencies:

flutter_test:

sdk: flutter

Step 2: Create a widget to test.

main.dart

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"),
        ),
      ),
    );
  }
}

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

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.
  });
}

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

void main() {
// MyAppWidgetTesting is stateless widget
  testWidgets("MyAppWidgetTesting", (WidgetTester tester) async {
    await tester.pumpWidget( MyAppWidget());
  });<code>
}

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.

void main() {
  testWidgets('MyAppWidgetTesting', (WidgetTester tester) async {
    await tester.pumpWidget( MyAppWidget());
    // Create the Finders.
    expect(find.text("MyText"), findsOneWidget);<code>
  });
}

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.

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>);
});

testWidgets('finds a specific instance', (WidgetTester tester) async {

const keyFinder = Key("text");

await tester.pumpWidget(MaterialApp(key: keyFinder, home: Container()));

// Find the MaterialApp widget using the testKey.

expect(find.byKey(keyFinder), findsOneWidget);

});

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/

Parveen Baghel 31 March 2022

. . .

Widget Testing in Flutter

Implementation:

Leave a Comment Cancel Reply

Message Sent!