0

WidgetTest時に、更新されたはずの値が更新されず、悩んでいます。

以下のTrialLogicクラスのaddメソッドを使って_numの値を更新し、

class TrialLogic with ChangeNotifier {
  late int _num;

  int get num {
    return _num;
  }

  void add(a, b) {
    _num = a + b;
    notifyListeners();
  }
}

更新した値が以下のTrialWidgetクラスに表示されていることを確認するテストをしたいのですが、

class TrialWidget extends StatelessWidget {
  const TrialWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final trialLogic = Provider.of<TrialLogic>(context);
    Future(() => trialLogic.add(5, 10));
    return Text(trialLogic.num.toString());
  }
}

以下のようにテストを書いて実行したところ、

testWidgets('更新した値が表示されていることを確認', (widgetTester) async {
  await widgetTester.pumpWidget(
    ChangeNotifierProvider(
      create: (_) => TrialLogic(),
      child: MaterialApp(
        home: TrialWidget(),
      ),
    ),
  );
  await widgetTester.pump();

  expect(find.text('15'), findsOneWidget);
});

以下のエラーが発生しました。値が更新されていないようです。
[_InheritedProviderScope<TrialLogic?>]):
LateInitializationError: Field '_num@22387026' has not been initialized.

しかしながら、シミュレータで確認してみると、更新された値が問題なく表示されていました。

テストではFutureで囲まれた処理を待たずにテストが走ってしまうため、
Futureで囲まれた処理を待つ場合にはexpectの前にawait pumpEventQueue()を挟まないといけないと聞いたので、
実際にやってみたのですが、今度はテストが一向に終わらなくなってしまいました。
他にFutureで囲まれた処理を待つ方法がわからなかったので、教えてください。
また、その他にも問題点がありましたら、ご指摘いただければ幸いです。

1 件の回答 1

0

TrialLogicとTrialWidgetの設計に問題があると思われます。
TrialLogicでは_numがlate指定されていて、その決定はaddで行われます。
これに対してTrialWidget内でTrialLogicのaddをFutureで実施しているので、その次の行でのgetではまだ_numが確定されていません。そのため提示されているエラーが出るのは当然です。

TrialLogicではlateではなく、初期値を設定する。
TrialWidget内でaddメソッドを呼び出すのではなく、通常こういうのは他の場所でaddが呼び出され、その結果を表示するというのではないでしょうか。

正しく動く実装としては以下の様な感じかな。

class TrialLogic with ChangeNotifier {
  int _num = 0;

  int get num {
    return _num;
  }

  void add(a, b) {
    _num = a + b;
    notifyListeners();
  }
}

class TrialWidget extends StatelessWidget {
  const TrialWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final trialLogic = Provider.of<TrialLogic>(context);
    return Text(trialLogic.num.toString());
  }
}

テスト部分

  testWidgets('更新した値が表示されていることを確認', (widgetTester) async {
    final data = TrialLogic();
    final widget = ChangeNotifierProvider(
      create: (_) => data,
      child: const MaterialApp(
        home: TrialWidget(),
      ),
    );
    await widgetTester.pumpWidget(widget);
    data.add(5, 10);
    await widgetTester.pump();

    expect(find.text('15'), findsOneWidget);
  });

もし非同期でのデータ確定でその結果を表示したいのであれば、FutureBuilderを使うなどして、未決定の状態を管理してウィジェットを表示するようにする必要があります。

またシミュレーター?の方ではaddメソッドをTrialWidgetのbuild呼び出し前に実行しているので_numが確定しているので正しく表示されているのでは。
そうなのであれば、シミュレーター処理手順を条件としたテストとするべきです。

3
  • ご回答ありがとうございます! いただいたコードでテストが通るようになりました。「TrialWidget内でaddメソッドを呼び出すのではなく、通常こういうのは他の場所でaddが呼び出され、その結果を表示するというのではないでしょうか。」→こちらについてですが、例えばTrialScreenでTrialWidgetを表示するとして、TrialScreenでaddメソッドを呼び出す、という理解であっていますでしょうか?
    – lightfly
    2022年12月28日 2:12
  • TrialScreenは今回の質問で初出です。それに関する情報はないのであっている・いないの判断は私にはできません。
    – ta.fu
    2022年12月28日 6:43
  • 承知しました! ご回答いただき、ありがとうございました!
    – lightfly
    2022年12月28日 12:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。