# 目次

1. 1-1 Flutterとflutter_testの概要

2. 1-2 Flutter Testのセットアップ方法

3. 1-3 基本的なWidgetテストの自動化

4. 1-4 モックによるAPIテストの自動化

5. 1-5 集中的なUIテストの自動化

6. 1-6 ステート管理を考慮したテスト自動化

7. 1-7 継続的インテグレーションとの統合

8. 1-8 まとめ

## 1-1 Flutterとflutter_testの概要

FlutterはGoogleが開発したオープンソースのUIフレームワークで、多くの開発者に使用されています。Flutterを利用することで、iOSやAndroid向けの美しいアプリケーションをシングルコードベースで構築できます。

`flutter_test`パッケージは、Flutterアプリケーションのテストを自動化するための強力なツールです。このパッケージを使用することで、ウィジェットレベル、機能レベル、インテグレーションレベルのテストを実行できます。

## 1-2 Flutter Testのセットアップ方法

Flutterのプロジェクトに`flutter_test`をセットアップするには、まず以下の手順に従います：

1. `pubspec.yaml`ファイルで以下の依存関係を追加します:

   ```yaml

   dev_dependencies:

     flutter_test:

       sdk: flutter

   ```

2. 依存関係を追加した後、ターミナルで以下のコマンドを実行し、パッケージをインストールします:

   ```bash

   flutter pub get

   ```

これで、基本的なセットアップが完了しました。それでは具体的なテストコードの自動化手法を見ていきましょう。

## 1-3 基本的なWidgetテストの自動化

ウィジェットテストでは、個々のUI部品が正しく動作するかどうかを検証します。以下にシンプルなカウンターアプリのテスト例を示します。

### Dart

```dart

import 'package:flutter/material.dart';

import 'package:flutter_test/flutter_test.dart';

import 'package:my_app/main.dart';

void main() {

  testWidgets('Counter increments smoke test', (WidgetTester tester) async {

    await tester.pumpWidget(MyApp());

    expect(find.text('0'), findsOneWidget);

    expect(find.text('1'), findsNothing);

    await tester.tap(find.byIcon(Icons.add));

    await tester.pump();

    expect(find.text('0'), findsNothing);

    expect(find.text('1'), findsOneWidget);

  });

}

```

このテストコードでは、初期状態でカウンターが0であることを確認し、ボタンをタップした後にカウンターの数値が1に変わることを確認しています。

## 1-4 モックによるAPIテストの自動化

APIテストの自動化には、モックライブラリを利用することで、外部サービスの応答をシミュレートできます。

### Dart

```dart

import 'package:flutter_test/flutter_test.dart';

import 'package:http/http.dart' as http;

import 'package:mockito/mockito.dart';

import 'package:my_app/data/api_service.dart';

class MockClient extends Mock implements http.Client {}

void main() {

  group('fetchData', () {

    test('returns data if the http call completes successfully', () async {

      final client = MockClient();

      when(client.get(Uri.https://example.com/data))

          .thenAnswer((_) async => http.Response('{"data": "Sample data"}', 200));

      expect(await fetchData(client), 'Sample data');

    });

    test('throws an exception if the http call completes with an error', () {

      final client = MockClient();

      when(client.get(Uri.https://example.com/data))

          .thenAnswer((_) async => http.Response('Not Found', 404));

      expect(fetchData(client), throwsException);

    });

  });

}

```

このコードでは、`mockito`を利用してAPIリクエストのレスポンスをモックしています。これにより、ネットワーク接続に依存することなくテストを行えます。

## 1-5 集中的なUIテストの自動化

UIテストでは、アプリケーション全体がユーザインタラクションに対して正しく応答するかを総合的にチェックします。Flutterの`flutter_driver`を使用することで実現できますが、この記事では、代替として`flutter_test`を使った例を示します。

### Dart

```dart

import 'package:flutter/material.dart';

import 'package:flutter_test/flutter_test.dart';

import 'package:my_app/main.dart';

void main() {

  testWidgets('Full app test', (WidgetTester tester) async {

    await tester.pumpWidget(MyApp());

    await tester.tap(find.byWidgetPredicate((Widget widget) =>

      widget is ElevatedButton && widget.child == Text('Login')));

    await tester.pumpAndSettle();

    expect(find.text('Welcome'), findsOneWidget);

  });

}

```

ここでは、ユーザが"Login"ボタンをクリックし、"Welcome"メッセージが正しく表示されるかをテストしています。

## 1-6 ステート管理を考慮したテストの自動化

ステート管理を利用した場合、その状態変化が意図通りであるかどうかもテストする必要があります。以下に`provider`を使ったテスト例を示します。

### Dart

```dart

import 'package:flutter/material.dart';

import 'package:flutter_test/flutter_test.dart';

import 'package:provider/provider.dart';

import 'package:my_app/models/counter.dart';

import 'package:my_app/main.dart';

void main() {

  testWidgets('Provider-based counter test', (WidgetTester tester) async {

    await tester.pumpWidget(

      ChangeNotifierProvider<Counter>(

        create: (_) => Counter(),

        child: MyApp(),

      ),

    );

    expect(find.text('0'), findsOneWidget);

    Provider.of<Counter>(tester.element(find.byType(MyApp)), listen: false)

        .increment();

    await tester.pump();

    expect(find.text('1'), findsOneWidget);

  });

}

```

このテストでは、`provider`を用い、`Counter`モデルの状態変化をテストしています。

## 1-7 継続的インテグレーションとの統合

テストを自動化する最大のメリットは、CI/CDパイプラインに組み込み、コードの品質を継続的に担保できることです。FlutterプロジェクトをCI環境に統合するには、まずCI/CDプラットフォーム（例: GitHub Actions, Travis CIなど）の設定ファイルを以下のように記述します。

### GitHub Actions

```yaml

name: Flutter CI

on: [push, pull_request]

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

    - uses: actions/checkout@v2

    - name: Set up Flutter

      uses: subosito/flutter-action@v1

      with:

        flutter-version: '2.2.3'

    - name: Install dependencies

      run: flutter pub get

    - name: Run tests

      run: flutter test

```

この設定により、コードが変更されるたびに自動でテストが実行され、テスト結果に基づいてワークフローが進行します。

## 1-8 まとめ

Flutterでのテスト自動化は、アプリケーションの品質を担保し、デプロイ時のリスクを低減するために極めて重要です。`flutter_test`パッケージは、ウィジェットレベルからエンドツーエンドまでのテストを網羅し、開発者にとって強力なツールとなります。

この記事では、Flutterと`flutter_test`によるテストの基本的な自動化手法を紹介しましたが、実際のプロジェクトではこれらをベースにより複雑なテストフレームワークを構築することが求められます。次回のプロジェクトで活用していただければ幸いです。

目次

続きを読むには単価診断を受けてください（30秒）