How can I unit test whether the ChangeNotifier's notifyListeners was called in Flutter/Dart?

Question

I'm using the provider package in our app and I want to test my ChangeNotifier class individually to have simple unit tests checking the business logic.

Apart from the values of ChangeNotifier properties, I also want to ensure that in certain cases (where necessary), the notifyListeners has been called, as otherwise, the widgets that rely on up-to-date information from this class would not be updated.

Currently, I'm indirectly testing whether the notifyListeners have been called: I'm using the fact that the ChangeNotifier lets me add a callback using its addListener method. In the callback that I add in our testing suite, I simply increment an integer counter variable and make assertions on that.

Is this the right way to test whether my ChangeNotifier calls its listeners? Is there a more descriptive way of testing this?

Here is the class I'm testing:

import 'package:flutter/foundation.dart';

class ExampleModel extends ChangeNotifier {
  int _value = 0;

  int get value => _value;

  void increment() {
    _value++;
    notifyListeners();
  }
}

and this is how I test it:

import 'package:mobile_app/example_model.dart';
import 'package:test/test.dart';

void main() {
  group('$ExampleModel', () {
    ExampleModel exampleModel;
    int listenerCallCount;

    setUp(() {
      listenerCallCount = 0;
      exampleModel = ExampleModel()
        ..addListener(() {
          listenerCallCount += 1;
        });
    });

    test('increments value and calls listeners', () {
      exampleModel.increment();
      expect(exampleModel.value, 1);
      exampleModel.increment();
      expect(listenerCallCount, 2);
    });

    test('unit tests are independent from each other', () {
      exampleModel.increment();
      expect(exampleModel.value, 1);
      exampleModel.increment();
      expect(listenerCallCount, 2);
    });
  });
}

Thank you @RémiRousselet, I was a bit unsure, as it requires some manual code, I was wondering if there's a better way with mockito maybe — Vince Varga, Jan 27 '20 at 14:59
You could use Mockito here. But since the listener neither has parameters nor needs to return something, then it's not very useful. — Rémi Rousselet, Jan 27 '20 at 15:04

Bao-Loc Nguyen Ngo · Answer 1 · 2021-11-22T10:59:31.117

Your approach seems fine to me but if you want to have a more descriptive way you could also use Mockito to register a mock callback function and test whether and how often the notifier is firing and thus notifying your registered mock instead of incrementing a counter:

import 'package:mobile_app/example_model.dart';
import 'package:test/test.dart';

/// Mocks a callback function on which you can use verify
class MockCallbackFunction extends Mock {
  call();
}
void main() {
  group('$ExampleModel', () {
    late ExampleModel exampleModel;
    final notifyListenerCallback = MockCallbackFunction(); // Your callback function mock

    setUp(() {
      exampleModel = ExampleModel()
        ..addListener(notifyListenerCallback);
      reset(notifyListenerCallback); // resets your mock before each test
    });

    test('increments value and calls listeners', () {
      exampleModel.increment();
      expect(exampleModel.value, 1);
      exampleModel.increment();
      verify(notifyListenerCallback()).called(2); // verify listener were notified twice
    });

    test('unit tests are independent from each other', () {
      exampleModel.increment();
      expect(exampleModel.value, 1);
      exampleModel.increment();
      expect(notifyListenerCallback()).called(2); // verify listener were notified twice. This only works, if you have reset your mocks
    });
  });
}

Just keep in mind that if you trigger the same mock callback function in multiple tests you have to reset your mock callback function in the setup to reset its counter.

Nice solution, however, it does not work for me: `Error: Non-nullable variable 'exampleModel' must be assigned before it can be used.` Any idea why the compiler does not get the assignment in the `setUp` function? — Heikkisorsa, Nov 21 '21 at 09:25
It is due to the Sound-Null-Safety feature of Dart. Variables are not allowed to have null values and requires the variable to be assigned right away. If we are sure, that our variable will be assigned later, which we are sure of in this case, then you can just use the [keyword `late`](https://dart.dev/null-safety/understanding-null-safety#late-variables). So at the declaration `late ExampleModel exampleModel` should do the trick. — Bao-Loc Nguyen Ngo, Nov 22 '21 at 10:58

Torben Keller · Answer 2 · 2020-02-07T12:13:27.180

I've ran into the same Issue. It's difficult to test wether notifyListeners was called or not especially for async functions. So I took your Idea with the listenerCallCount and put it to one function you can use.

At first you need a ChangeNotifier:

class Foo extends ChangeNotifier{
  int _i = 0;
  int get i => _i;
  Future<bool> increment2() async{
    _i++;
    notifyListeners();
    _i++;
    notifyListeners();
    return true;
  }
}

Then the function:

Future<R> expectNotifyListenerCalls<T extends ChangeNotifier, R>(
    T notifier,
    Future<R> Function() testFunction,
    Function(T) testValue,
    List<dynamic> matcherList) async {
  int i = 0;
  notifier.addListener(() {
    expect(testValue(notifier), matcherList[i]);
    i++;
  });
  final R result = await testFunction();
  expect(i, matcherList.length);
  return result;
}

Arguments:

The ChangeNotifier you want to test.
The function which should fire notifyListeners (just the reference to the function).
A function to the state you want to test after each notifyListeners.
A List of the expected values of the state you want to test after each notifyListeners (the order is important and the length has to equal the notifyListeners calls).

And this is how to test the ChangeNotifier:

test('should call notifyListeners', () async {
  Foo foo = Foo();

  expect(foo.i, 0);

  bool result = await expectNotifyListenerCalls(
      foo,
      foo.increment2,
      (Foo foo) => foo.i,
      <dynamic>[isA<int>(), 2]);

  expect(result, true);
});

The problem is when the expect() failed inside the listener callback it just throw an unhandled exception but the test will still passed. — Gerald, Apr 29 '21 at 14:14

呂學洲 · Answer 3 · 2021-06-28T01:13:28.377

I have wrap it to the function

import 'package:flutter/foundation.dart';
import 'package:flutter_test/flutter_test.dart';

dynamic checkNotifierCalled(
  ChangeNotifier notifier,
  Function() action, [
  Matcher? matcher,
]) {
  var isFired = false;
  void setter() {
    isFired = true;
    notifier.removeListener(setter);
  }

  notifier.addListener(setter);

  final result = action();
  // if asynchronous
  if (result is Future) {
    return result.then((value) {
      if (matcher != null) {
        expect(value, matcher);
      }
      return isFired;
    });
  } else {
    if (matcher != null) {
      expect(result, matcher);
    }
    return isFired;
  }
}

and call it by:

final isCalled = checkNotifierCalled(counter, () => counter.increment(), equals(2));
expect(isCalled, isTrue);

How can I unit test whether the ChangeNotifier's notifyListeners was called in Flutter/Dart?

3 Answers3