Writing and running widget tests from Android Studio

I started to learn flutter to know more about this new framework and how it helps to build and deploy apps in Android and iOS platforms. I thought this is something really cool and so started my journey with this awesome framework.

Since I come from testing background, alongwith flutter development, I am also very curious about what kind of tools flutter provides to test the app built with it. This gives good introduction and overview of types of testing supported in Flutter.

I am going to talk about widget tests, how to write your first widget test, run the test from Android Studio by editing run configurations and see the test results under Run tab.

In order to start writing our first widget test, we first need to look into the flutter_test package that comes in-built with Flutter SDK. In pubspec.yaml file, look for dev_dependencies section and observe that flutter_test dependency is already added under it. That means we don’t need to explicitly add any dependency to start our widget testing. Nice !!

Next, the flutter_test package contains quite a few tools that we will need to use during our widget testing. Let’s take a look at them one by one:

1. WidgetTester : This is a callback that allows us to interact with the widget that we are going to test. Consider this as our starting point to execute our test.

2. testWidgets : This is a function that creates WidgetTester automatically that will be used for our test.

3. Finder : As the name suggests, this is a class that helps us to find the widget in our test.

4. Matcher : This helps us to validate whether the Finder class finds a single widget or multiple widgets in our test.

With above overview, let’s dig deep in these concepts hands on.

For this topic, I made a simple screen that has an app bar and a text at the center of the screen, as shown below, that I am going to use to write our first widget test.

Our goal is to validate the text displayed in app bar widget and text widget is indeed what we provided while developing the screen.

Now, let’s get into the testing zone and see how we can make use of the testing tools to accomplish our goal.

First of all, let’s create a new dart file under test/ folder and name it first_widget_test.dart

Open the new test file you just created and import following packages :

import ‘package:flutter/material.dart’;

import ‘package:flutter_test/flutter_test.dart’;

The first package is the default package that we need to import that has all widgets we use. flutter_test package provides us the tools and utilities I mentioned above for our tests.

Our test file will start with void main() function, since this is the starting point for our test execution and test runner will look for this function before it starts to execute our test.

Inside void main() function, we will start with testWidgets keyword which takes a string and a WidgetTester call. Consider the string that we are going to pass as our first parameter, as the name of test scenario that we need to validate, like : testWidgets(‘validate text widget’, (WidgetTester tester) async {

WidgetTester provides us a method named pumpWidget which will build and render the widget we are going to provide. Since we are going to validate text widget, which is a part of Scaffold which in turn is part of MaterialApp widget, we are going to provide the parent widget here, as :

await tester.pumpWidget(MaterialApp)

the keyword tester. builds the widget for our testing. Next up, we need to provide the actual text that we are going to validate, like :

home: Scaffold(

body: Text(‘Widget Test Demo’),

),

Once we informed tester what we are going to look for, we then need to find the text and match it with Matcher. For this, we’ll use find method provided by flutter_test package and findsOneWidget matcher to validate. Below is how these will be used :

expect(find.text(‘Widget Test Demo’), findsOneWidget);

since we know we are finding a text widget, we used find.text() and match it with the matcher.

Below is the complete test script:

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('validate text widget', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
      home: Scaffold(
        body: Text('Widget Test Demo'),
      ),

    ));
    expect(find.text('Widget Test Demo'), findsOneWidget);
  });

  testWidgets('validate appbar widget', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widget Test Demo'),
        ),
      )
    ));
    expect(find.text('Widget Test Demo'), findsOneWidget);
  });

}

Nice !! you wrote your first widget test to simply validate a text widget and appbar widget that is displayed on the screen.

Moving to next and last part, how do we run this test to make sure the test we wrote actually works and it passes ? There are 2 ways. You can either run through command line or use Android Studio’s run configuration to setup flutter test configuration and run. I am going to show you the latter.

In Android Studio, go to Run -> Edit Configurations. On Left hand section of the configuration screen, click on + icon and select Flutter Test configuration. Give a name to this new configuration (ex : widget_testing), keep Test Scope as All in file and select the test file that we created. ie (first_widget_test.dart) and that’s it. Click Apply, OK and you have configured test widget configuration to explicitly run your widget tests.

Now hit run to execute your first widget test and see it’s test result being shown under Run tab at the bottom of Android Studio screen.

I hope this will give you atleast a headstart on performing widget testing and what kind of tools Flutter SDK provides us to write concise tests. If you think there are any discrepancies or I missed any point, please feel free to comment below.

Also, let’s be friends and connect via Twitter.

My Github.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.