ウィジェットのテストの概要

コンテンツ

の中に単体テストの概要レシピ、を使用して Dart クラスをテストする方法を学習しました。testパッケージ。ウィジェットクラスをテストするには、flutter_testFlutter SDK に同梱されているパッケージ。

のflutter_testパッケージには次のツールが含まれていますウィジェットのテスト:

のWidgetTester構築と対話が可能テスト環境でウィジェットを使用します。
のtestWidgets()自動的に機能する新しいものを作成しますWidgetTesterテストケースごとに、通常の代わりに使用されますtest()関数。
のFinderクラスによりウィジェットの検索が可能になりますテスト環境で。
ウィジェット固有のMatcher定数は検証に役立ちますかどうかFinderウィジェットを見つけるか、テスト環境での複数のウィジェット。

これが圧倒的に聞こえるかもしれませんが、心配しないでください。これらすべての部品がどのように適合するかを学びましょうこのレシピ全体を通して、次の手順を使用します。

を追加します。flutter_test依存。
テストするウィジェットを作成します。
を作成しますtestWidgetsテスト。
を使用してウィジェットを構築しますWidgetTester。
を使用してウィジェットを検索しますFinder。
を使用してウィジェットを確認しますMatcher。

1.`flutter_test`依存

テストを作成する前に、flutter_testの依存関係dev_dependenciesのセクションpubspec.yamlファイル。コマンドラインツールを使用して新しい Flutter プロジェクトを作成する場合、またはコードエディターの場合、この依存関係はすでに設定されているはずです。

dev_dependencies:
  flutter_test:
    sdk: flutter

次に、テスト用のウィジェットを作成します。このレシピに関しては、を表示するウィジェットを作成するtitleとmessage。

class MyWidget extends StatelessWidget {
  const MyWidget({
    super.key,
    required this.title,
    required this.message,
  });

  final String title;
  final String message;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

3.`testWidgets`テスト

テストするウィジェットを使用して、最初のテストを作成することから始めます。使用testWidgets()によって提供される機能flutter_testテストを定義するパッケージ。のtestWidgets関数を使用すると、ウィジェットをテストして作成しますWidgetTester一緒に仕事をする。

このテストは次のことを検証しますMyWidget指定されたタイトルとメッセージを表示します。それに応じてタイトルが付けられており、次のセクションで説明します。

void main() {
  // Define a test. The TestWidgets function also provides a WidgetTester
  // to work with. The WidgetTester allows you to build and interact
  // with widgets in the test environment.
  testWidgets('MyWidget has a title and message', (tester) async {
    // Test code goes here.
  });
}

4. 次のコマンドを使用してウィジェットを構築します。`WidgetTester`

次にビルドしますMyWidgetを使用してテスト環境内でpumpWidget()によって提供されるメソッドWidgetTester。のpumpWidgetメソッドは、提供されたウィジェットを構築してレンダリングします。

を作成しますMyWidgetタイトルとして「T」を表示するインスタンスメッセージとして「M」が表示されます。

void main() {
  testWidgets('MyWidget has a title and message', (tester) async {
    // Create the widget by telling the tester to build it.
    await tester.pumpWidget(const MyWidget(title: 'T', message: 'M'));
  });
}

Pump() メソッドに関する注意事項

最初の電話の後、pumpWidget()、WidgetTester提供します同じウィジェットを再構築する追加の方法。これは次のような場合に便利ですと一緒に作業するStatefulWidgetまたはアニメーション。

たとえば、ボタンをタップすると電話がかかります。setState()ただし、Flutter はそうではありませんテスト環境でウィジェットを自動的に再構築します。次のいずれかの方法を使用して、Flutter にウィジェットを再構築するように依頼します。

tester.pump(Duration duration): フレームをスケジュールし、ウィジェットの再構築をトリガーします。もしDurationを指定すると、時計を次のように進めます。その量を指定してフレームをスケジュールします。スケジュールは立てません継続時間が 1 秒より長い場合でも、複数のフレームシングルフレーム。

tester.pumpAndSettle(): 繰り返し電話をかけるpump()までの指定された期間でスケジュールされたフレームはもうありません。これは基本的に、すべてのアニメーションが完了するのを待ちます。

これらのメソッドにより、ビルドライフサイクルをきめ細かく制御できます。これはテスト中に特に役立ちます。

5. を使用してウィジェットを検索します。`Finder`

テスト環境のウィジェットで検索ウィジェットツリーを介して、titleとmessageを使用したテキストウィジェットFinder。これにより、次のことが確認できます。ウィジェットは正しく表示されています。

この目的のために、トップレベルのfind()によって提供されるメソッドflutter_testを作成するためのパッケージFinders。探しているのはわかっているので、Textウィジェットの場合は、find.text()方法。

詳細については、Finderクラスについては、を参照してください。ウィジェットテストでのウィジェットの検索レシピ。

void main() {
  testWidgets('MyWidget has a title and message', (tester) async {
    await tester.pumpWidget(const MyWidget(title: 'T', message: 'M'));

    // Create the Finders.
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');
  });
}

6. を使用してウィジェットを確認します。`Matcher`

最後にタイトルとメッセージを確認しますTextウィジェットが画面に表示されるを使用してMatcherによって提供される定数flutter_test。Matcherクラスはその中核部分ですtestパッケージ、特定のデータを検証する一般的な方法を提供します価値が期待に応えます。

ウィジェットが画面に 1 回だけ表示されるようにします。この目的のために、findsOneWidget Matcher。

void main() {
  testWidgets('MyWidget has a title and message', (tester) async {
    await tester.pumpWidget(const MyWidget(title: 'T', message: 'M'));
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');

    // Use the `findsOneWidget` matcher provided by flutter_test to verify
    // that the Text widgets appear exactly once in the widget tree.
    expect(titleFinder, findsOneWidget);
    expect(messageFinder, findsOneWidget);
  });
}

追加のマッチャー

に加えてfindsOneWidget、flutter_test追加の機能を提供します一般的なケースのマッチャー。

findsNothing: ウィジェットが見つからないことを確認します。
findsWidgets: 1 つ以上のウィジェットが見つかったことを確認します。
findsNWidgets: 特定の数のウィジェットが見つかったことを確認します。
matchesGoldenFile: ウィジェットのレンダリングが特定のビットマップ画像と一致することを検証します (「ゴールデンファイル」テスト)。

完全な例

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

void main() {
  // Define a test. The TestWidgets function also provides a WidgetTester
  // to work with. The WidgetTester allows building and interacting
  // with widgets in the test environment.
  testWidgets('MyWidget has a title and message', (tester) async {
    // Create the widget by telling the tester to build it.
    await tester.pumpWidget(const MyWidget(title: 'T', message: 'M'));

    // Create the Finders.
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');

    // Use the `findsOneWidget` matcher provided by flutter_test to
    // verify that the Text widgets appear exactly once in the widget tree.
    expect(titleFinder, findsOneWidget);
    expect(messageFinder, findsOneWidget);
  });
}

class MyWidget extends StatelessWidget {
  const MyWidget({
    super.key,
    required this.title,
    required this.message,
  });

  final String title;
  final String message;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

1.flutter_test依存

2. テストするウィジェットを作成する

3.testWidgetsテスト

4. 次のコマンドを使用してウィジェットを構築します。WidgetTester