Flutter Automated Tests  -  Getting Started

Subscribe to my newsletter and never miss my upcoming articles

Automated tests in software development help you catch bugs and many other issues with your app before you push it. This is especially useful for large apps where testing every part manually might not be possible.

Lucky for us, Flutter has different types of tests we can do.

We will look at unit and widget tests in this piece.

Unit Tests

Unit testing is breaking your code into simple parts (units), and these parts are then tested. These units are usually functions, methods, classes, or even variables. Let’s try it out!

First, you should have the flutter_test package installed in your dev dependencies in your pubspec.yaml file.

If you’re building a Dart app that does not depend on Flutter, you can install the test package as a dev dependency.

Next, create a class with the code you’d like to test, I’ve named mine we.dart and create the test file for this class, I’ve named mine we_test.dart.The file where your code is can be in the lib/folder and your tests should be in the tests/ folder on the root.

The code in the class we want to test is as follows:

Here, we have a simple class with one method and one string instance. The string, text should be edited with the sum of the parameters passed to the populateText() method after it is called.

Our test file looks like this:

First, we import the flutter_test package and the class we want to test. Then, we start writing.

We start with the test() method from the flutter_test package. The method accepts two parameters. First, the description of the test and second, a function with the tests to run.

Here, we first set the class WeTest(), which we imported to a variable, then we call the populateText method, passing in params two and three. Therefore, we expect the result of the sum to be five.

We then call the expect() method from flutter_test, which is used to _assert_that the unit we are testing matches what is returned when the code was run. These two are called the actual and the matcher respectively.

If they match, then our tests pass, if they don’t, then it fails.

Run the test

You can run the test by opening the test file (we_test.dart) and then run debug from the debugger on VS Code.

Or, run flutter test test/we_test.dart in your terminal.

Widget Tests

Widget tests do exactly what they imply: test widgets.

Widget tests are different from unit tests in that they require classes and functions different from those in unit tests. These tools are part of the flutter_test package.

Let’s get to it!

At this point, you should have the flutter_test package installed through your pubspec.yaml file.

Next, we need widgets to test, so we’ll create a screen with some simple widgets:

The output is a screen with a text field (and a controller), a RaisedButton, and a text widget (for showing the inputted text).

Now that we have widgets, let’s write our tests:

Immediately, you should start spotting the differences between this and the unit tests we wrote previously.

  1. The testWidgets() function, which creates a new [WidgetTester](https://api.flutter.dev/flutter/flutter_test/WidgetTester-class.html) for each test, is used in place of test() function in unit tests.
  2. The [Finder](https://api.flutter.dev/flutter/flutter_test/Finder-class.html), which is used to locate individual widgets.
  3. The Matcher (findsOneWidget, findsNothing, findsNwidgets), which we use to verify the widgets.
  4. pump(), which Flutter uses to build a widget. You can also set a duration for things like animations.

What’s going on here?

  • First, we’re using the testWidgets() function and passing a description for this test, and the WidgetTester to be used with every test case.
  • Then, we build the widgets by calling pumpWidget().
  • Our first use of the Finder class is to find the raised button on the screen. We use the byType() method here, but there are a lot more we can try, which I’ll try to show by using find.byKey() later on, to find the text field with the key assigned to it.
  • Next, we try to test the TextField. First, we verify that there is a TextField with the find.byKey() finder and findsOneWidget matcher, and then trigger a rebuild of the views.
  • Calling the enterText() method from the [WidgetTester](https://api.flutter.dev/flutter/flutter_test/WidgetTester-class.html) allows Flutter to input text into the TextField found, then rebuild views again.
  • Finally, we ask Flutter to check that the text printed on the screen is the same as the text that was inputted in the previous step.

Run the tests via your editor or run flutter test test/widget_test.dart in your terminal. This test should pass, but play with it and see the different ways things can break.

Also, check out all the methods and examples in the classes used.

I hope this article helps you get started writing tests in your Flutter apps!

No Comments Yet