Practical Example of Unit Test in Flutter + Bloc

From beginner to beginner, by the beginner. Hope this will gave you the answer you're looking for :)

This article was written as an individual review assignment for PPL CSUI 2021

Doing Testing for your project is a must, but working on it is simply not easy. just imagine you have to code so your projects work, and it is hard, then you also need to make the test. Imagine it already makes me feel dizzy :(. but we already knew that doing testing has many advantages and in my personal opinion, not doing a test is just like walking in the street blindfolded and trust me, when you’re not making test, it makes your life not peaceful because you don’t know when suddenly someone calling you because there is a bug, maybe when you’re currently playing your favorite game, pretty annoying :(

Background

Because we know how important doing testing is, I have to create my test for my flutter project. well as I already mentioned, it’s very hard and too much effort, especially because I was using Bloc as my design pattern, there is not much documentation and example out there, that’s what makes creating a test much more painful, when the documentation and example are limited.

In this article, I will show you an example of how I am testing my flutter projects, especially how to test a screen that is wrapped by BlocListener then checks if a specific widget exists on that screen or not.

Problem

because of this piece of code, I’m unable to do a test like what flutter test documentation says, because the parent widget for my all screen was wrapped by BlocListener, and because of that I need to initialize all the Bloc that I used before can pump the screen widget. there is no documentation at all for this case. after a bunch of sleepless nights finally I found a way of how to test the screen that was wrapped by BlocListener.

Example

In this example, I will try to test this screen and check the card with the text “Bab 1:Pendahuluan” exist or not. as what I say before, we need to initialize all the bloc that is needed for the BlocListener consumption, so for doing that I will mock my bloc, then inject it into my Test BlocProvider widget. the idea for this test is I will force the test to load the screen as the primary screen, which is this above screen will be loaded immediately when the test ran. this is how I implement what I say

as you can see, I’m creating a TestApp that will be pumped in the test widget, and in the TestApp, I was injected MockAuthenticationBloc into BlocProvider, and the TestApp, in the end, will rendering my PanduanScreen, which is the screen that we want to test.

Then the last step is pumping the TestApp widget and test your desired case. in this case I will check if a card with the text “Bab 1: Pendahuluan” exists.

in my case, to check the desired widget I will use find.byKey, you can assume that the card with the text “Bab 1: Pendahuluan” have a key with the value “card_1”. as you can see when I was running this test in vscode, the test is passed with green color :) trust me green color will be your favorite when writing a test.

That’s all for this article, hope this article will give you the answers that you looking for and prevent you from endless sleepless night creating test :(. if this way works for your project or not works, please let me know by writing a comment in this article :)

Thank You and don’t forget to have a sleep :)!