How to perform mobile integration testing with Flutter?

Hello, in my first post, I will show you how to perform integration testing with Flutter using an example counter project.

First, let’s create a Flutter project.

flutter create integration_test_example

Yes, we have created our Flutter project, and now we are opening the project with our favorite editor.

The initial file structure of our project.

When we open our editor, we see the file structure of our project as shown above. Now, we can proceed with the necessary steps to perform integration testing.

First, we open the pubspec.yaml file in the root directory of our project and add the following lines under the dev_dependencies section.

integration_test:
  sdk: flutter

The dev_dependencies in the pubspec.yaml file.

Next, we create a folder named “integration_test” in the root directory of our project.

mkdir integration_test

After creating the “integration_test” folder, the final file structure of our project is as follows.

Now that we have created the integration_test folder, we can start writing our test. To do this, first, we create a Dart file named app_test.dart inside the integration_test folder. It’s important to name our test files with the *_test.dart pattern as Flutter recognizes them as test files using this naming convention.

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

import 'package:integration_test_example/main.dart' as app;

void main() {
  testWidgets("it should see increase counter when click add button",
      (tester) async {
    app.main();
    await tester.pumpAndSettle();

    expect(find.text("You have pushed the button this many times:"),
        findsOneWidget);
    expect(find.text("0"), findsOneWidget);

    await tester.tap(find.byIcon(Icons.add));
    await tester.pumpAndSettle();

    expect(find.text("1"), findsOneWidget);

    await tester.tap(find.byIcon(Icons.add));
    await tester.pumpAndSettle();

    expect(find.text("2"), findsOneWidget);

    await tester.tap(find.byIcon(Icons.add));
    await tester.pumpAndSettle();

    expect(find.text("3"), findsOneWidget);
  });
}

Above, we first defined the necessary packages. Then, we created a main function for our test and wrote the test logic inside it. By examining the code, it is evident that we first checked the presence of the text “You have pushed the button this many times:” in our application. After that, we pressed the + button three times and verified the correctness of the updated counter value after each click. With each button press, we updated the application’s state using the tester.pumpAndSettle(); function, which caused the application to re-render, and the counter value increased accordingly.

Now that we have written our test, it’s time to run it. To run our test, we enter the following command in our terminal while being in the directory of our project.

flutter test integration_test

The output of the above command automatically opens our mobile application in the emulator and executes the steps we wrote in the test one by one. After completing the test, the application closes.

Yes, we have come to the end of my first article, and I hope I have explained everything clearly and concisely. Below, you can find the code for the sample project. Thank you for reading, and I hope to see you in the next one!

Github: https://github.com/anilaydinn/integration-test-example