【Flutter】Widget TestでKeyで探したWidgetのテキストを抽出する。

こんにちは。

個人でアプリ開発をしているYuKiOです。
アプリを13本リリースしています。

HackerMemoを大幅にアップデートしたので、

海外向けのPVを作ってみました😆

夜なべして頑張って作ったので、拡散頂けたら泣いて喜びます😭🙏

音有りがオススメです！

元ネタわかる人いるかな〜🤔

アプリはこちら🔽
■iPhoneの方https://t.co/6T10L94Ld1

■Androidの方https://t.co/uBevCXrNw2 pic.twitter.com/wiGLv46kaG

— YuKiO｜アプリ個人開発｜Flutter × Firebase (@oo_forward) January 10, 2021

さて、Flutterの自動テストには「Unit Test」、「Widget Test」、「Integration Test」と３つありますが、

その中で「Widget Test」は、主にアプリのUIを確認するために用いられると思います。

今回は、KeyからWidgetを探して、その中にあるTextを取得します。

例えば、Widget Testで、特定のテキストが表示されているかチェックする場合、このような形で書くと思います。

button_widget_test.dart

   testWidgets('EditButtonに編集と表示されている', (WidgetTester tester) async {
      await tester.pumpWidget(testWidget);
      expect(find.text("編集"), findsOneWidget);
    });

この場合、表示されている数を知りたいなどザックリをチェックしたいのであれば問題がありませんが、例えばリストの特定のボタンが、指定された文字列になっているかはチェックができません。

できれば厳密に指定したいのでKeyを使って文字列をテストする場合、このようにできます。※これはText Widgetを使っている場合です。適宜必要なWidgetを指定してください。

button_widget_test.dart

   testWidgets('EditButtonに編集と表示されている', (WidgetTester tester) async {
      await tester.pumpWidget(testWidget);
     //まずKeyで特定する
    final finder = find.byKey(ValueKey("buttonText1");
     //Widgetを抽出 
    final text = finder.evaluate().single.widget as Text;
    //text.dataに文字列が格納されている。
     expect(text.data, "編集");
    });

たとえば、TextFiledの状態もチェックできます。

button_widget_test.dart

   testWidgets('nameFieldにテストと表示されている', (WidgetTester tester) async {
      await tester.pumpWidget(testWidget);
      final finder = find.byKey("nameField");
      final textField = finder.evaluate().single.widget as TextField;
      final text = textField.controller?.text;
      expect(text, "テスト");
    });

文字の色なんかも、同じような要領で確認できます。

button_widget_test.dart

   testWidgets('EditButtonに編集と表示されている', (WidgetTester tester) async {
      await tester.pumpWidget(testWidget);
    final finder = find.byKey(ValueKey("buttonText1"));
    final text = finder.evaluate().single.widget as Text;
    //text.style?.colorで抽出
    final color = text.style?.color;
    expect(color, Colors.white);
    });