Flutter

【Flutter】開発した内容が正常に動作するか、ユニットテストを実行する

作成日：2022年04月21日

更新日：2022年04月21日

Flutter では、テストをする方法がいくつかあります。

その中で、一番基本となるユニットテストを実行します。

まずは、画面に数字を表示させます。

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _point = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '計算結果が表示されます:',
            ),
            Text(
              '8',
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

次に、掛け算を計算するファイルを作成しましょう。

utils フォルダに、for_calculate.dart を作成します。

for_calculate.dart の中身は、a と b を掛けた数を返すようにします。

dart
int calculate(int a, int b) {
  return a * b;
}

calculate 関数の結果を、画面に表示させます。

dart
import 'package:test_calculate/utils/for_calculate.dart';

dart
const Text(
	  '計算結果が表示されます:',
	),
	Text(
	  calculate(20, 5).toString(),
	  style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
  ),

画面を確認すると、

20 x 5 = 100 なので、画面に 100 が表示されました。

ここから、計算式のテストを行います。

test フォルダに、計算式を作成したファイルと同じフォルダを作成します。

今回は、utils フォルダを作成したので、test フォルダに utils フォルダを作成します。

for_calculate.dart のテストであるとわかるように、同じファイル名に_test をつけてファイルを作成します。

まずは、flutter_test.dart をインポートします。

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

次に、void main(){}を作成し、testを設定します。

testの中は、第一引数に結果表示される文言、第二引数にテスト内容を設定します。

まずは、数値を設定し、calculate関数を実行します。

最後に、expectを使い、予想される計算結果を指定します。

dart
import 'package:flutter_test/flutter_test.dart';
import 'package:test_slider/utils/for_calculate.dart';

void main() {
  test('計算結果:', () {
    const int a = 2, b = 4;

    int result = calculate(a, b);

    expect(result, 8);
  });
}