Flutter Mobile Development · レッスン

ウィジェットテストの原則

ウィジェットを単体で検証するウィジェットテストを記述し、UIと動作が正しく、見た目も期待どおりであることを確認します。

「ウィジェットテストの原則」はCoddyKit上の無料Flutter Mobile Developmentレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFlutter Mobile Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

What is Widget Testing?

Welcome to widget testing! It's a key part of building robust Flutter apps.

Widget tests let you check if your individual UI components (widgets) look and behave as expected. Think of it as putting each piece of your app under a microscope.

Focus: Individual widgets.
Goal: Verify UI rendering and interaction in isolation.

Diving into `flutter_test`

Flutter provides a special package called flutter_test for writing widget tests. It's automatically included in new Flutter projects.

The core of widget testing is the testWidgets function. It gives you a WidgetTester to interact with your widgets and an environment to run them.

Where Do Tests Go?

Flutter test files typically live in the test/ folder of your project. For example, if you have a widget in lib/my_widget.dart, its test might be in test/my_widget_test.dart.

Each test file starts with importing package:flutter_test/flutter_test.dart and defines one or more testWidgets blocks.

Your Testing Helper: `WidgetTester`

The WidgetTester is your main tool for interacting with widgets during a test. It provides methods to:

pumpWidget(): Renders a widget tree.
find: Locates widgets in the tree.
tap(): Simulates a tap on a widget.
pump(): Rebuilds the widget tree, often after an interaction.

It helps simulate how a user would interact with your app.

Testing a Basic Stateless Widget

Let's test a simple StatelessWidget. Imagine a widget that just shows some text.

We'll use tester.pumpWidget() to display our widget, then tester.find to locate the text, and finally expect() to assert that it's there.

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  final String message;

  const MyTextWidget({Key? key, required this.message}) : super(key: key);

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

void main() {
  runApp(const MyTextWidget(message: "Hello CoddyKit!"));
}

Code: Testing `MyTextWidget`

Here's how you'd write a test for our MyTextWidget. Notice how we wrap it in MaterialApp and Scaffold to give it a proper context for rendering.

We use find.text() to locate the text and expect() with findsOneWidget to confirm its presence.

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

// Assume MyTextWidget is defined in a separate file or above for testing
class MyTextWidget extends StatelessWidget {
  final String message;
  const MyTextWidget({Key? key, required this.message}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

void main() {
  testWidgets('MyTextWidget displays correct message', (WidgetTester tester) async {
    // Build our widget and trigger a frame.
    await tester.pumpWidget(const MyTextWidget(message: 'Hello CoddyKit!'));

    // Verify that our message appears.
    expect(find.text('Hello CoddyKit!'), findsOneWidget);
    expect(find.text('Goodbye!'), findsNothing);
  });
}

Interacting with Widgets

Widget tests can simulate user interactions. This is crucial for testing StatefulWidgets or widgets with buttons, text fields, etc.

tester.tap(finder): Simulates a tap on the widget found by finder.
tester.enterText(finder, text): Enters text into a TextField.
tester.pump(): After an interaction that causes state changes (like a button tap), you must call pump() to rebuild the UI and reflect those changes.

Testing a Basic Stateful Widget

Let's create a simple counter widget. It has a text displaying a number and a button to increment it. We'll test its initial state and then its behavior after a tap.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                key: const Key('counterText'), // Added key for easy finding
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('incrementButton'), // Added key
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

void main() {
  runApp(const CounterWidget());
}

Code: Testing `CounterWidget`

Here's the test for our CounterWidget. We first verify the initial count, then simulate a tap on the increment button using its Key, and finally assert that the count has updated.

Remember to call tester.pump() after tester.tap() to rebuild the UI and see the state change.

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

// Assume CounterWidget is defined in a separate file or above for testing
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() { _counter++; });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('You have pushed the button this many times:'),
              Text('$_counter', key: const Key('counterText'), style: Theme.of(context).textTheme.headlineMedium),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('incrementButton'),
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

void main() {
  testWidgets('CounterWidget increments counter on button tap', (WidgetTester tester) async {
    // Build our CounterWidget.
    await tester.pumpWidget(const CounterWidget());

    // Verify that the counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the 'increment' icon and trigger a frame.
    await tester.tap(find.byKey(const Key('incrementButton')));
    await tester.pump(); // Rebuild the widget after interaction

    // Verify that the counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

Essential Test Matchers

When writing tests, you'll use expect() with various "matchers" to verify conditions. Here are some common ones:

findsOneWidget: Expects exactly one widget matching the finder.
findsNWidgets(N): Expects exactly N widgets.
findsNothing: Expects no widgets matching the finder.
findsWidgets: Expects one or more widgets.

These help you precisely assert what should or shouldn't be on screen.

Quick Check on Testing

Imagine you have a Text('Hello World') widget. Which find method would you use to confirm this text is visible on the screen after calling tester.pumpWidget()?

Recap: Widget Testing Basics

Great job! You've learned the fundamentals of widget testing:

Widget tests verify individual UI components.
The flutter_test package provides tools like testWidgets and WidgetTester.
You use tester.pumpWidget() to render, find to locate, and expect() with matchers to assert.
tester.tap() and tester.pump() simulate user interaction and update the UI.

Next, you'll explore more advanced testing techniques!

よくある質問

「ウィジェットテストの原則」レッスンは無料ですか？

はい。「ウィジェットテストの原則」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Flutter Mobile Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Flutter Mobile Developmentコースには全4レッスンが含まれています。

「ウィジェットテストの原則」で何を学びますか？

ウィジェットを単体で検証するウィジェットテストを記述し、UIと動作が正しく、見た目も期待どおりであることを確認します。ブラウザで直接実行するハンズオンコードでFlutter Mobile Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Flutter Mobile Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFlutter Mobile Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「ウィジェットテストの原則」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFlutter Mobile Developmentレッスンでコードを書いて実行できますか？

はい。すべてのFlutter Mobile Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Flutter Mobile Developmentに戻る