Testing Flutter apps翻译-Widget测试介绍

官方文档

在单元测试的介绍里，我们学习到了如何使用 test 包测试Dart类，为了测试Widget类，我们需要一些由 flutter test 包提供的额外工具，这些 工具 随Flutter SDK发布。

这个 flutter_test 包提供了以下用于测试Widget的工具：

• WidgetTester：该工具允许我们在测试环境里build Widget并与之交互。
• 使用 testWidgets 函数。这个函数将自动对每个测试用例创建一个 WidgetTester ，并用于替代普通的 test 函数。
• Finder classes：该工具允许我们在测试环境里查找Widget。
• Widget Matcher：一些常量，帮助我们验证在测试环境里是否找到一个或者多个Widget。

如果上面的内容听不懂的话，没关系，让我们通过一些例子来将上面的碎片信息串联到一起。

步骤：

flutter_test
WidgetTester
Finder
Matcher

1. 添加 flutter_test 依赖。

在我们开始写测试之前，我们需要在 pubspec.yaml 文件的 dev_dependencies 行下面添加 flutter_test 包。如果你通过命令行或者编译器创建的Flutter项目，那么该依赖已经添加好了。

dev_dependencies:
  flutter_test:
    sdk: flutter
复制代码

2. 创建一个Widget用来测试。

下一步，我们需要创建一个能让我们测试的Widget。在这个例子里，我们创建了显示一个标题和一条信息的Widget。

class MyWidget extends StatelessWidget {
  final String title;
  final String message;

  const MyWidget({
    Key key,
    @required this.title,
    @required this.message,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}
复制代码

3. 创建一个testWidgets测试方法

现在我们有了一个可以用来测试的Widget，我们可以编写我们第一个测试用例了！我们将会使用 flutter_test 包提供的 testWidgets 函数完成一个测试用例。这个 testWidgets 函数将会允许我们定义一个Widget测试用例并创建一个 WidgetTester 给我们使用。

我们的测试将会验证 MyWidget 类是否正常显示给定的标题和信息。

void main() {
  // Define a test. The TestWidgets function will also provide a WidgetTester
  // for us to work with. The WidgetTester will allow us to build and interact
  // with Widgets in the test environment.
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    // Test code will go here!
  });
}
复制代码

4. 使用 WidgetTester build一个Widget

下一步，我们将会在测试环境里build我们的 MyWidget 类。为了这么做，我们将使用 WidgetTester 提供的 pumpWidget 方法。这个 pumpWidget 方法将会build和渲染我们提供的Widget。

在这个示例里，我们将会创建一个显示标题“T”和消息“M”的 MyWidget 实例。

void main() {
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    // Create the Widget tell the tester to build it
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));
  });
}
复制代码

备注： 第一次调用 pumpWidget 之后， WidgetTester 提供了重新创建相同Widget的其他方式。如果你使用 StatefulWidget 或者动画，这将会非常有用。

例如，如果我们点击一个按钮，并且这个按钮调用了 setState 方法，Flutter不会在测试环境里rebuild你的Widget。我们需要使用下面的方法之一来告诉Flutter再一次build我们的Widget。

• tester.pump()

  在一个给定的时间以后rebuild你的Widget。

• tester.pumpAndSettle()

  在给定的时间不断重复调用 pump 方法直到不再有任何绘制任务。一般用于等待所有动画完成。

这些方法提供了比build生命周期更细粒度的控制，这在测试的时候特别有用。

5. 使用 Finder 搜索我们的Widget。

现在我们已经在测试环境构建了我们的Widget，我们想要通过使用 Finder 在Widget树里搜索我们的 title 和 message Widget。这将允许我们验证是否正确显示了那些Widget!

在这个例子里，我们将会使用 flutter_test 包提供的顶级 find 方法去创建我们的 Finder 类。因为我们知道我们在寻找Text widget，所以我们可以使用 find.text 方法。 有关 Finder 类的更多信息，请查看 在Widget测试里查找Widget 。

void main() {
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));

    // Create our Finders
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');
  });
}
复制代码

6. 使用 Matcher 验证我们的Widget是否工作正常。

最后，我们可以使用 flutter_test 包提供的 Matcher 常量来验证title和message Text Widgets是否出现在屏幕。 Matcher 类是 test 包的核心部分，并且提供了通用的方式去验证给定的值是否符合我们的期望。

在这个例子里，我们想要我们的Widgets只在屏幕出现一次。因此，我们可以使用 findsOneWidget 这个 Matcher 。

void main() {
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');

    // Use the `findsOneWidget` matcher provided by flutter_test to verify our
    // Text Widgets appear exactly once in the Widget tree
    expect(titleFinder, findsOneWidget);
    expect(messageFinder, findsOneWidget);
  });
}
复制代码

额外的 Matcher ： 在 findsOneWidget 以外， flutter_test 为常见用例提供了额外的 Matcher ：

• findsNothing

  验证没有Widget被找到。

• findsWidgets

  验证一个或者多个Widget被找到。

• findsNWidgets

  验证指定数量的Widget被找到。

完整示例：

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

void main() {
  // Define a test. The TestWidgets function will also provide a WidgetTester
  // for us to work with. The WidgetTester will allow us to build and interact
  // with Widgets in the test environment.
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    // Create the Widget tell the tester to build it
    await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));

    // Create our Finders
    final titleFinder = find.text('T');
    final messageFinder = find.text('M');

    // Use the `findsOneWidget` matcher provided by flutter_test to verify our
    // Text Widgets appear exactly once in the Widget tree
    expect(titleFinder, findsOneWidget);
    expect(messageFinder, findsOneWidget);
  });
}

class MyWidget extends StatelessWidget {
  final String title;
  final String message;

  const MyWidget({
    Key key,
    @required this.title,
    @required this.message,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}
复制代码