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

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

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

main.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),
            ),
          ],
        ),
      ),
    );
  }
}

image2

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

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

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

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

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

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

画面を確認すると、

image3

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

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

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

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

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

image4

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

import 'package:flutter_test/flutter_test.dart';

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

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

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

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

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);
  });
}

一通り完成したので、実行します。

Visual Studio Code では、testの横矢印をクリックします。

image5

image6

テスト結果は、合格したようです。

例えば、間違った結果を入力し、実行すると、

image7

image8

テスト結果が不合格になりました。

あなたが期待した結果は 6 ですが、実際は 8 になります、と表示されました。

ブログ一覧