Unit Testing in Flutter With Examples

You can find the source code for the examples here: Github Link

What is a Unit Test?

A unit test is a test that verifies the behavior of an isolated piece of code. It can be used to test a single function, method or class.

Remember: "unit" is another name for a function, method or a class

Let's start with the basic Counter app we get as the default app in Flutter.

Example 1: Basic Counter App:

Actual Code:

This is the default app we get with flutter.

Initially separate the counter code from the UI code. So we just put it in a file named counter.dart:

class Counter {  
  int _counter = 0;  

  int get count => _counter;  

  void incrementCount() {  
    _counter += 1;  
  }  
}

Testing:

Now we can write a unit test for this in a file named counter_test.dart.
As for the name convention it always must end in _test.dart with the start being any name.
In order to test. We'll always have to import 'package:flutter_test/flutter_test.dart';

Tests are defined using the top-level test functions and you can check if the results are correct using the top-level expect function. So we can call a test(description,body) function inside our main().

`test(description, body)`:

Description: The standard convention when describing a test class is:

GIVEN WHEN THEN

For example in the current scenario we want to check if the count value is 0 when the counter class is instantiated.

So we'll write: Given counter class when it is instantiated then the value of the count should be 0.

Body: In here we are going to do three things: ARRANGE ACT ASSERT

ARRANGE: We will declare an object of the class

ACT: We will get the value of the count

ASSERT: We will check if the value is 0

Testing Code:

Count Test:

And here's the final counter_test.dart:

import 'package:basic_counter/counter.dart';  
import 'package:flutter_test/flutter_test.dart';  
void main() {  
  // given when then  
  test('Given counter class when it is instantiated then value of the count should be 0', (){  
    // Arrange  
    final Counter counter = Counter();  
    // Act  
    final val = counter.count;  
    // Assert  
    expect(val, 0);  
  });  
}

We can test the code using the following command:

flutter test

`incrementCount()` test

We can also test the incrementCount(): using the following code:

 // given when then  
  test('Given counter class when incrementCount() is called then the value of the count should be 1',(){  
    // Arrange  
    final Counter counter = Counter();  
    // Act  
    counter.incrementCount();  
    final val = counter.count;  

    // Assert  
    expect(val, 1);  
  });  
}

Grouping Tests

Since both of the tests are for the Counter class. we can group them together like this:

// Given When Then  
group('Test start, increment', () {  
  // Arrange  
  final Counter counter = Counter();  
  test(  
      'Given counter class when it is instantiated then value of the count should be 0',  
      () {  

    // Act  
    final val = counter.count;  
    // Assert  
    expect(val, 0);  
  });  

  // given when then  
  test(  
      'Given counter class when incrementCount() is called then the value of the count should be 1',  
      () {  
    // Act  
    counter.incrementCount();  
    final val = counter.count;  

    // Assert  
    expect(val, 1);  
  });  
});

To run all the tests you put in a group, run the following command:

flutter test --plain-name "Test start, increment"

Pre-test and Post-test:

Imagine if we added another function to Counter called decrementCounter():

void decrementCounter() {
    _counter--;
}

Now we'll have to again add another test:

test(  
    'Given counter class when decrementCount() is called then the value of the count should be -1',  
    () {  

  counter.decrementCount();  
  final val = counter.count;  

  expect(val, -1);  
});

The problem is that the above test will fail because in the incrementCount test we've increased the value to 1. So now val will be 0. This is why Flutter provides us with pre-test and post-test functions.

Pre-test Functions:

There are two pretest functions:

setUp()
setUpAll()

`setUp()`:

This function will run before every test. So let's say we have 3 tests:

Then it'll be setUp --> test --> setUp --> test --> setUp --> test

So in order to solve the above problem of running multiple tests with the same instance of the Counter() we can declare it like this:

void main() {
    late Counter counter;
    setUp((){
    counter = Counter();
    });

    test()...
....
}

`setUpAll()`:

This function will run only once.

So it'll be: setUpAll --> test --> test --> test

Post-test Functions:

There are two post-test functions:

tearDown()
tearDownAll()

`tearDown()`:

The function will run after every test.

test -> tearDown -> test -> tearDown

`tearDownAll()`:

The function will only run once after all the tests are done.

test -> test -> test -> tearDownAll

And thanks to using the pre-test functions. We are able to run all the tests successfully. You can find the source code for the project here: Github Link

Example 2: HTTP User App

In this app we are goin to test some fundamental network calls using http from pub.dev.

We are going to call a user from JsonPlaceHolder site.

Imagine we have define a basic User Model:

class User {  
  int id;  
  String name;  
  String username;  
  String email;  
  String phone;
  }

getUser():

Now we can define a UserRepository class where we can get the user from network from jsonPlaceholder:

class UserRepository {  
  Future<User> getUser() async {  
    final response = await http.get(  
      Uri.parse('https://jsonplaceholder.typicode.com/users/1'),  
    );  

    if (response.statusCode == 200) {  
      final responseBody = jsonDecode(response.body);  
      return User.fromJson(responseBody);  
    }  
    throw Exception('Some Error Occurred');  
  }  
}

Testing:

We have multiple testing scenarios

Test if it returns an object of the type isUser

void main() {  
  late UserRepository userRepository;  
  // Pre-test function  
  setUp(() {  
    userRepository = UserRepository();  
  });  
  group('User Repository -', () {  
    group('getUser Function -', () {  
      test(  
          'given UserRepository class when getUser function is called and status code is 200 then the returned object should be a User Model',  
          () async {  
        // Act  
        final user = await userRepository.getUser();  

        // Assert  
        expect(user, isA<User>());  
      });  
    });  
  });  
}

If you look at the expect() The way we check if it is an object is by using isA<User>() function.

Test if it returns an Exception when the status code is not 200

test(  
    'given userRepository class when getUser function is called and the status code is not 200 then the function throws an exception',  
    () async {  
  // Act  
  final user = await userRepository.getUser();  

  // Assert  
  expect(user, throwsException);  
});

We can check for an exception using throwsException

But the problems is when we run it. The test it is obviously going to fail because the status code is going to be 200. So how do we test the exception test block ?

We are going to use external packages for testing. Some of the best ones are mockito and mocktail.

In this scenario we are going to use mocktail.

Dependency Injection for Testing:

If we take a look at our getUser() function. We see that it is dependent on http package.

So whenever there is an external dependency we need to get control over them so that we can test them out properly. This is basically dependency injection.

Since our main dependency is http. Let's put in the constructor so that we can inject it from anywhere so we are going to change the UserRepository to this

class UserRepository {  
  final http.Client client;  

  UserRepository(this.client);  

  Future<User> getUser() async {  
    final response = await client.get(  
      Uri.parse('https://jsonplaceholder.typicode.com/users/1'),  
    );  

    if (response.statusCode == 200) {  
      final responseBody = jsonDecode(response.body);  
      return User.fromJson(responseBody);  
    }  
    throw Exception('Some Error Occurred');  
  }  
}

Since we are calling a constructor, we can switch the http client to a mock client if we want for testing purposes. A mock client allows us to modify its behavior.

For now we will be using the Mocktail from pub.dev as we can pass in a mock client.

We are going to add Mocktail to the dev dependency

flutter pub add -d mocktail

Why do we need external Mock packages?

Imagine if we wanted to create a MockHTTPClient of Client from HTTP. We get the following:

The problem is that we'll have to implement 10 missing overrides just to create the client which obviously is an extremely heavy task.

This is where Mocktail comes into play. So we can write the following code:

class MockHTTPClient extends Mock implements Client {}

and it doesn't cause any errors.

Using Mocktail inside the test function.

We have to use the when() to declare the expected output for the mockHTTPClient

StatusCode 200 test:

test(  
          'given UserRepository class when getUser function is called and status code is 200 then the returned object should be a User Model',  
          () async {  
        // Arrange  
        when(() => mockHTTPClient  
                .get(Uri.parse('https://jsonplaceholder.typicode.com/users/1')))  
            .thenAnswer((invocation) async {  
          return Response('''  
              {  "id": 1,  "name": "Leanne Graham",  "username": "Bret",  "email": "Sincere@april.biz",  "phone": "1-770-736-8031 x56442",  "website": "hildegard.org"}  
              ''', 200);  
        });  
        // Act  
        final user = await userRepository.getUser();  

        // Assert  
        expect(user, isA<User>());  
      });

Throw Exception test:

test(  
      'given userRepository class when getUser function is called and the status code is not 200 then the function throws an exception',  
      () async {  
    // Arrange  
    when(  
      () => mockHTTPClient.get(  
        Uri.parse('https://jsonplaceholder.typicode.com/users/1'),  
      ),  
    ).thenAnswer(  
      (invocation) async => Response('', 500),  
    );  
    // Act  
    final user =  userRepository.getUser();  

    // Assert  
    expect(user, throwsException);  
  });  
});

As you can see here i just changed the status code and this resulted in a exception which satisfies our test case.

And this basically covers Unit Testing basics. Also these are just my notes after watching the excellent video from Rivan Ranawat. You can find the video here: Youtube Link

Happy Coding 🐦

Unit Testing in Flutter With Examples

Comments (1)

Flutter Testing Course

Flutter Unit Testing with Mockito:

More from this blog

Microsoft Edge: Favorites in “Workspaces” are now displayed in folders instead of directly in the bar [Fix]

Flutter Dio Part 3: Interceptors

Flutter Dio Part 2: Handling Responses and Errors

Flutter Dio Part 1: Introduction to Dio

Mastering setState in Flutter: When to Use It and When to Avoid It

What is a Unit Test?

Example 1: Basic Counter App:

Actual Code:

Testing:

`test(description, body)`:

Testing Code:

Count Test:

`incrementCount()` test

Grouping Tests

Pre-test and Post-test:

Pre-test Functions:

`setUp()`:

`setUpAll()`:

Post-test Functions:

`tearDown()`:

`tearDownAll()`:

Example 2: HTTP User App

getUser():

Testing:

Test if it returns an object of the type isUser

Test if it returns an Exception when the status code is not 200

Dependency Injection for Testing:

Why do we need external Mock packages?

Using Mocktail inside the test function.

StatusCode 200 test:

Throw Exception test:

Command Palette

Comments (1)

Flutter Testing Course

Flutter Unit Testing with Mockito:

More from this blog

What is a Unit Test?

Example 1: Basic Counter App:

Actual Code:

Testing:

test(description, body):

Testing Code:

Count Test:

incrementCount() test

Grouping Tests

Pre-test and Post-test:

Pre-test Functions:

setUp():

setUpAll():

Post-test Functions:

tearDown():

tearDownAll():

Example 2: HTTP User App

getUser():

Testing:

Test if it returns an object of the type isUser

Test if it returns an Exception when the status code is not 200

Dependency Injection for Testing:

Why do we need external Mock packages?

Using Mocktail inside the test function.

StatusCode 200 test:

Throw Exception test:

`test(description, body)`:

`incrementCount()` test

`setUp()`:

`setUpAll()`:

`tearDown()`:

`tearDownAll()`: