🤖

[Flutter] Widgetテストのいろいろ

2022/05/10に公開

FlutterのWidget Testを行う上で気づいたことやエラーなどをメモしていきます. 👍

Widgetを探す

ensureVisible

該当Widgetが画面外にあるとき,そのWidgetが表示されるまでスクロールする

該当Widgetが画面外にあるときに表示されるwarning.

Maybe the widget is actually off-screen, or another widget is obscuring it, or the widget cannot receive pointer events.

https://api.flutter.dev/flutter/flutter_test/WidgetController/ensureVisible.html

byKey

特定のKeyを持つWidgetを探す

https://api.flutter.dev/flutter/flutter_test/CommonFinders/byKey.html

textのvalueを取得する

Textのvalueを取得して,その値が正しいかどうか確認したい.

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

void main() {
  testWidgets('expect text.data == "text"', (WidgetTester tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: Column(
          children: const [
            Text(
              'text',
              key: ValueKey('unit_text'),
            ),
          ],
        ),
      ),
    );
    // ValueKey で探す
    final finder = find.byKey(const ValueKey('unit_text'));
    // 探したWidgetをText Widgetとして取得
    final text = finder.evaluate().single.widget as Text;
    // Text Widgetのdataが'text'と正しいか比較
    expect(text.data, 'text');
  });
}

evaluate method
https://stackoverflow.com/questions/54235752/flutter-how-to-get-text-widget-on-widget-test

GithubTwitterInstagram

TextFieldのmaxlengthを取得する

TextFieldにmaxLengthを指定して,その値をテストしたい.

TextField(
        maxLength: 30,
final finder = find.byType(TextField);
final textField = finder.evaluate().first.widget as TextField;
final textField = await r.expectEditTitleTextFieldFound();
expect(textField.maxLength, maxLength);

https://stackoverflow.com/questions/55911229/how-to-unit-test-a-flutter-textformfield-maxlines

https://stackoverflow.com/questions/10404516/how-can-i-compare-lists-for-equality-in-dart

https://qiita.com/akinobu-tani/items/7e27b1f5281b7e897d3c

GitHubで編集を提案

Discussion