在 Flutter 小部件测试中，如何验证字段验证错误消息？

Question

我正在为 Flutter 表单编写一个小部件测试，并想验证在表单提交后，验证失败，并且errorText其中一个字段显示并符合预期。

该字段的代码如下所示：

Form(key: _formKey, ...
  TextFormField(validator: validateEmail, ...)

对于测试断言，我尝试过类似的事情

expect(find.text('Please fill in your email.'), findsOneWidget);

没有成功。希望有人能指出我正确的方向。

Answer 1

我重新创建了您的案例并能够验证内联错误消息。这个想法是在我们可以测试断言之前添加 1 秒的延迟。这是我所做的：

main.darttextformfield点击Send按钮时显示和验证电子邮件的代码：

TextFormField(
            decoration: new InputDecoration(hintText: 'Email ID'),
            keyboardType: TextInputType.emailAddress,
            maxLength: 32,
            validator: validateEmail,
            onSaved: (String val) {
              email = val;
            }),

validateEmail 方法片段：

if (value.length == 0) {
      return "Email is Required";
    } else if(!regExp.hasMatch(value)){
      return "Invalid Email";
    }else {
      return null;
    }

用于验证电子邮件字段的内联错误消息的小部件测试：

void main() {
  testWidgets('validate email inline error message',
          (WidgetTester tester) async {

        await tester.pumpWidget(MyApp());

        final buttonFinder = find.text('Send');
        final emailErrorFinder = find.text('Email is Required');

        await tester.tap(buttonFinder);
        print('button tapped');
        await tester.pump(const Duration(milliseconds: 100)); // add delay
            expect(emailErrorFinder, findsOneWidget);
        print('validated email inline error');
      });
}

测试结果：

希望这能回答你的问题。