Flutter ウィジェットテストの作成

目次

• セットアップと構成
• コアコンポーネント
• ワークフロー: ウィジェットテストの実装
• インタラクションと状態管理
• 例

セットアップと構成

ウィジェットテストを作成する前に、テスト環境が正しく構成されていることを確認します。

1. pubspec.yaml の dev_dependencies セクションに flutter_test 依存関係を追加します。
2. すべてのテストファイルをプロジェクトのルートの test/ ディレクトリに配置します。
3. すべてのテストファイル名に _test.dart サフィックスを付けます (例: widget_test.dart)。

コアコンポーネント

ウィジェットツリーをインタラクトして検証するために、以下の flutter_test コンポーネントを使用します:

• WidgetTester: テスト環境でウィジェットをビルドしてインタラクトするためのプライマリインターフェース。testWidgets() 関数によって自動的に提供されます。
• Finder: テスト環境内でウィジェットを検索します (例: find.text('Submit')、find.byType(TextField)、find.byKey(Key('submit_btn')))。
• Matcher: Finder によって検索されたウィジェットの存在または状態を検証します (例: findsOneWidget、findsNothing、findsNWidgets(2)、matchesGoldenFile)。

ワークフロー: ウィジェットテストの実装

新しいウィジェットテストを実装するときに進行状況を追跡するために、以下のチェックリストをコピーしてください。

タスク進行状況

• ステップ 1: テストを定義します。 testWidgets('description', (WidgetTester tester) async { ... }) を使用します。
• ステップ 2: ウィジェットをビルドします。 await tester.pumpWidget(MyWidget()) を呼び出して UI をレンダリングします。継承されたテーマデータまたは方向データが必要な場合は、ウィジェットを MaterialApp または Directionality ウィジェットでラップします。
• ステップ 3: 要素を検索します。 ターゲットウィジェットの Finder オブジェクトをインスタンス化します。
• ステップ 4: 初期状態を検証します。 expect(finder, matcher) を使用して初期レンダリングを検証します。
• ステップ 5: インタラクションをシミュレートします。 ジェスチャーまたは入力を実行します (例: await tester.tap(buttonFinder))。
• ステップ 6: ツリーをリビルドします。 await tester.pump() または await tester.pumpAndSettle() を呼び出して状態変更を処理します。
• ステップ 7: 更新された状態を検証します。 インタラクション後の UI を検証するために expect() を使用します。
• ステップ 8: 実行して検証します。 flutter test test/your_test_file_test.dart を実行します。
• ステップ 9: フィードバックループ。 テスト出力を確認 → 失敗したマッチャーを特定 → ウィジェットロジックまたはテストアサーションを調整 → パスするまで再実行します。

インタラクションと状態管理

テストするインタラクションまたは状態変更のタイプに基づいて、以下の条件ロジックを適用します:

• 静的レンダリングをテストする場合: await tester.pumpWidget() を 1 回呼び出してから、すぐに expect() アサーションを実行します。
• 標準的な状態変更をテストする場合 (例: ボタンタップ):
  1. await tester.tap(finder) を呼び出します。
  2. await tester.pump() を呼び出して単一フレームのリビルドをトリガーします。
• アニメーション、トランジション、または非同期 UI 更新をテストする場合:
  1. アクションをトリガーします (例: await tester.drag(finder, Offset(500, 0)))。
  2. await tester.pumpAndSettle() を呼び出してフレームが予定されなくなるまで繰り返しポンプします (アニメーション完了)。
• テキスト入力をテストする場合: await tester.enterText(textFieldFinder, 'Input string') を呼び出します。
• 動的またはロングリスト内のアイテムをテストする場合: await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder) を呼び出して、ターゲットウィジェットがレンダリングされていることを確認してからインタラクトします。

例

高忠実度ウィジェットテスト実装

ターゲットウィジェット (lib/todo_list.dart):

import 'package:flutter/material.dart';

class TodoList extends StatefulWidget {
  const TodoList({super.key});

  @override
  State<TodoList> createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  final todos = <String>[];
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            TextField(controller: controller),
            Expanded(
              child: ListView.builder(
                itemCount: todos.length,
                itemBuilder: (context, index) {
                  final todo = todos[index];
                  return Dismissible(
                    key: Key('$todo$index'),
                    onDismissed: (_) => setState(() => todos.removeAt(index)),
                    child: ListTile(title: Text(todo)),
                  );
                },
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              todos.add(controller.text);
              controller.clear();
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

テスト実装 (test/todo_list_test.dart):

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

void main() {
  testWidgets('Add and remove a todo item', (WidgetTester tester) async {
    // 1. Build the widget
    await tester.pumpWidget(const TodoList());

    // 2. Verify initial state
    expect(find.byType(ListTile), findsNothing);

    // 3. Enter text into the TextField
    await tester.enterText(find.byType(TextField), 'Buy groceries');

    // 4. Tap the add button
    await tester.tap(find.byType(FloatingActionButton));

    // 5. Rebuild the widget to reflect the new state
    await tester.pump();

    // 6. Verify the item was added
    expect(find.text('Buy groceries'), findsOneWidget);

    // 7. Swipe the item to dismiss it
    await tester.drag(find.byType(Dismissible), const Offset(500, 0));

    // 8. Build the widget until the dismiss animation ends
    await tester.pumpAndSettle();

    // 9. Verify the item was removed
    expect(find.text('Buy groceries'), findsNothing);
  });
}