Practical Guide to Integration Testing in Flutter: Test, Verify, Repeat!

While both unit and integration tests are integral facets of a robust testing approach in the Flutter test regime, they have significant differences in scope and function.

‍

Unit Test

Unit tests in Flutter focus on the granular level, dealing with particular, isolated functions, methods, or widgets, validating that each part of the app behaves as expected independently. While unit tests help quickly identify and solve specific code errors, they don't provide a broader picture of the app's holistic performance.

‍

Integration Test

In contrast, integration testing in Flutter tests the application as a whole. It checks the synchronization, communication, and data exchange between different app components, ensuring that they work together seamlessly when united. This process is indispensable for high-level verification of the system's composite function.

By writing integration tests, bugs that occur due to interactions between components can be caught and fixed, helping achieve optimal app performance.

‍

How to Prepare the Ground for Integration Testing in Flutter?

‍

Creating a Flutter App for Testing

To illustrate how to write integration tests process in Flutter, let's develop a simple app, such as a "Tasks completion" app. This widget-based app will allow users to mark tasks as completed by tapping them.

Here's the code:

Copy
     import 'package:flutter/material.dart';
    
    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: 'Tasks Completion App',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key});
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      List<String> _tasks = ['Task 1', 'Task 2', 'Task 3'];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Tasks Completion App'),
          ),
          body: ListView.builder(
            itemCount: _tasks.length,
            itemBuilder: (context, index) {
              return ListTile(
                // Providing a Key to the ListTile. This allows identifying the
                // widget from inside the test suite.
                key: Key('task_${_tasks[index]}'),
                title: Text(_tasks[index]),
                trailing: const Icon(Icons.check_circle, color: Colors.green),
                onTap: () {
                  setState(() {
                    _tasks.removeAt(index);
                  });
                },
              );
            },
          ),
        );
      }
    }
     

In our example, the app lists three tasks and users can tap to mark them as complete, which would subsequently remove them from the list.

‍

Setting up Your Testing Environment

‍

Adding the integration_test Dependency

Before writing Flutter integration tests, we must ensure our environment is set up to perform them. The first step is to include the integration_test package in our project's dependencies.

To do so, we add the integration_test and flutter_test packages to the dev_dependencies section of our app's pubspec.yaml file. The Flutter SDK is specified as the location of the package.

Here's an example:

Copy
     dev_dependencies:
      integration_test:
        sdk: flutter
      flutter_test:
        sdk: flutter
     

Upon adding the dependencies and saving the pubspec.yaml file, Flutter updates and downloads the necessary testing packages.

‍

Structuring Your Integration Tests

‍

Creating Test Files

When maintaining order in our tests, we typically create a separate directory to hold our integration test files. For instance, we can create a directory named integration_test at the root level of the project.

In our case, we'll create an empty app_test.dart file for our Flutter integration testing script inside our integration_test directory. Here's how our project structure now looks:

‍

Writing the Integration Test

Upon creating the test file, it's time to kickstart our Flutter test journey and write our first integration test. For this, an instance of the IntegrationTestWidgetsFlutterBinding class needs to be initialized. This plays a crucial role in executing tests on an actual device.

We'll utilize the WidgetTester class, which provides various ways to interact with our widgets.

The testWidgets function will assist in verifying the specific behaviour of the app's interface and interactions.

‍

Diving Deeper into Integration Test Writing

‍

Initializing IntegrationTestWidgetsFlutterBinding

Before we start writing Flutter integration testing scenarios, initializing the IntegrationTestWidgetsFlutterBinding class is crucial. This class is a singleton service that runs our tests on physical devices.

Here's how we do that:

This initialization ensures the test binding is correctly set up before we commence our tests.

‍

Interacting and Testing Widgets with WidgetTester

WidgetTester proves to be a valuable tool in our interaction with widgets. It allows us to simulate user interaction, replay recorded events, pump frames for rendering, and inspect the current widget tree.

Let's see it in the context of our "Tasks Completion" app. We will:

1. Load our app using the pumpWidget method.
2. Find our tasks using their assigned keys.
3. Emulate a tap on the tasks to mark them as complete.
4. Trigger a frame to rebuild our UI with the new state.

‍

Running Your Integration Test

After writing integration tests, it's time to run them and see how your app behaves. The process differs depending on whether you are testing against a mobile platform or the web.

‍

Running the Test on Mobile (iOS / Android)

If you want to test your Flutter integration scenarios on a real iOS/Android device, connect it to your machine first. Once connected, you may run integration tests with the following command from the root of your project:

This command runs the application, followed by the integration test on the target device.

‍

Running all Integration Tests in a Directory

In case you wish to run all integration tests found in a directory, specify the directory as shown below:

The command above will run all the test files in the integration_test directory.

‍

Running the Test on the Web

Getting started with testing in a web browser requires downloading ChromeDriver . Once done, we create a new directory named test_driver comprising a new file named integration_test.dart.

Launch chromedriver as specified:

Finally, from the root of your project, issue the following command:

For a headless testing experience, you can use the web server as the target device identifier:

‍

Wrapping Up Our Testing Journey

‍

The Indispensability of Integration Testing

Integration testing in Flutter is not just a 'good-to-have', but rather a 'must-have'. It safeguards against unforeseen issues that may arise when different app components interact. Its crucial role in maintaining a high level of reliability makes it an indispensable part of our Flutter development workflow.

‍

The Road Ahead in Your Flutter Journey

This comprehensive guide was designed to give you a practical and hands-on understanding of the process and the benefits of integrating testing in the Flutter app. While we've covered a significant chunk of this topic, there is always more to learn and explore in the ever-evolving world of Flutter and app development. Keep coding, keep testing, and remember: Your endeavour for perfection in your app's behaviour is directly proportional to the rigour of your testing strategies.

Thank you for accompanying me on this testing journey, and looking forward to exploring more Flutter territories with you!

     tasks_completion_app/
      lib/
        main.dart
      integration_test/
        app_test.dart
     

     void main() {
      IntegrationTestWidgetsFlutterBinding.ensureInitialized();
      ...
    }
     

     flutter test integration_test/app_test.dart
     

     flutter test integration_test
     

     import 'package:integration_test/integration_test_driver.dart';
    
    Future<void> main() => integrationDriver();
     

     chromedriver --port=4444
     

     flutter drive \
      --driver=test_driver/integration_test.dart \
      --target=integration_test/app_test.dart \
      -d chrome
     

     flutter drive \
      --driver=test_driver/integration_test.dart \
      --target=integration_test/app_test.dart \
      -d web-server