Finally a Quick & Easy Way to write tests for your Flutter Apps

Write UI based Integration tests on Flutter

Example of Automated Test

What is Testing in Flutter?

When you are new at developing applications like me, testing is the last thing that comes to your mind. You want to jump right into the hard code of your app. Even when you feel mature enough to decide to write some tests, there rises the question, which kind of test should I write?

Testing Pyramid in Flutter

• Unit testing :they are used to test individual components or pieces of code to check if they work as the developer intended in isolated scenarios. In unit tests, it’s crucial to execute a variety of scenarios, including happy path, error handling, etc… Each function or method you write should be tested in every possible scenario. Who in the actual world does that?
• Widget testing : the goal here is to assert that a single widget works correctly based on possibly mocked inputs. It is used to verify appearance and interaction of a single widget in the widget tree. I find them less annoying to code than unit tests but still very boring.
• Integration testing : Integration tests are found at the very top of the pyramid. In this case, it refers to UI Testing as it is supposed to test the app in real-world scenarios instead of controlled ones. And to be honest, they are way funnier to code than the previous ones…

When building your app, you imagine how the users are going to navigate around it. Since integration tests are UI based, you get the see automated human-like interactions with your product (which is very cool). In that context, building UI tests for me felt more natural than unit or integration tests. It felt like the first “non-boring” step into the testing world. So for the next part, I’m going to detail a simple example of UI Testing for a Flutter Mobile App.

How do you write UI tests for a Flutter application?

1. Create an App to test

First, we create an app for testing. If you already have an app built, just move to the next step. Otherwise, we will use the counter app produced by the flutter create test_appcommand. It is a simple app that increases a counter when the user taps on a button.

Counter App

2. Adding dependencies

The Flutter SDK includes integration_test package, so you don’t need to copy it from the Pub.dev website. Instead, you just need to add integration_test to your pubspec.yaml like this :

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

Don’t forget to run flutter pub get right after.

3. Create a testing directory

In the project’s root, create a folder namedintegration_tests that will contain all of the project’s integration tests. Add an empty file app_test.dart .

Testing directory in Project’s tree

4. Write your first integration test

A very simple integration test we can write for this application would be :

1. Check if the initial value of the counter is ‘0’
2. Press the increment button once
3. Check if the counter value increases to ‘1’

For that, in app_test.dart, insert:

• IntegreationTestWidgetsFlutterBinding.ensureInitialized() checks the integration test driver’s initialization. It also reinitializes the driver if it isn’t initialized yet.
• pumpAndSettle() is used to wait for all the animation (loading screens, …). It is called after app.main() because you want to wait for the navigation animations to complete and the app to be ready.
• expect(find.text('0'), findsOneWidget) is used to check that there is exactly one widget that contains the text '0' .
• find.byToolTip('Increment') parse the app and find a widget with the tooltip 'Increment' .
• Once the increment button is found, tester.tap(fab) is used to mimic a press on that button.

5. Run the integration test and let the magic happen 🪄🪄🪄

To test on a real iOS / Android device, first connect the device and run the following command from the root of the project:

flutter test integration_tests/app_test.dart

Or, you can specify the directory to run all integration tests:

flutter test integration_tests

This command runs the app and integration tests on the target device.

Where do I go from here ?

This was just a quick introduction to UI Testing in Flutter.

• Online services like Firebase Test Lab exist to test your app on multiple devices.
• For more details on Unit Testing and Widget Testing.
• Thanks for reading, I hope you found this article useful!