一、前言
移动应用的测试往往比较复杂且工作量很大，为了验证用户的真实使用体验往往需要跨越多个平台以及不同的物理设备手动测试。随着产品功能不断迭代累积，测试的复杂度随之大幅增长，手动测试会变得更加困难。因此，编写自动化测试用例对我们的项目更新、迭代有着非常重要的作用。
二、单元测试
单元测试是指对软件中的最小可测试单元进行验证的方式，使用单元测试可以验证单个函数、方法或类的行为。我们来看看 Flutter 项目的工程目录：
如上图所示，lib 是 Flutter 应用源文件目录，test 是测试文件目录。接下来我们看看编写单元测试用例的步骤。
2.1 相关步骤
2.1.1 添加依赖
Flutter 工程默认添加了 flutter_test package，如果是 dart package 没有依赖 Flutter，可以导入 test package，示例代码如下：
dev_dependencies: flutter_test: sdk: flutter //or test:2.1.2 声明一个用来测试的类
在 lib 目录下新建一个 dart 文件，声明一个用来测试的类，示例代码如下：
//unit.dart class Counter { int value = 0; void increment() => value ; void decrement() => value--;}2.1.3 编写测试用例
在 test 目录下创建一个 dart 文件（文件名建议已 _test 结尾），编写测试用例。测试用例通常包含含定义、执行和验证步骤，示例如下：
//unit_test.dart import 'package:flutter_unit_test/unit.dart';import 'package:flutter_test/flutter_test.dart'; void main() { //第一个用例，判断Counter对象调用increase方法后是否等于1 test('Increase a counter value should be 1', () { final counter = Counter(); counter.increase(); expect(counter.count, 1); }); //第二个用例，判断1 1是否等于2 test('1 1 should be 2', () { expect(1 1, 2); });}可以看到验证需要使用 expect 函数，将最小可测单元的执行结果与预期进行比较。另外，测试用例需要包装在 test() 内部，test 是 flutter 提供的测试用例封装类。
2.1.4 启动测试用例
选择 unittest.dart 文件，在右键弹出的菜单中选择 “Run ‘tests in widgettest’”，就可以启动测试用例了。运行结果如下：
接下来我们修改下测试用例代码，如下：
void main() { //第一个用例，判断Counter对象调用increase方法后是否等于1 test('Increase a counter value should be 1', () { final counter = Counter(); counter.increase(); expect(counter.count, 2); }); //第二个用例，判断1 1是否等于2 test('1 1 should be 2', () { expect(1 1, 2); });}可以看到，我们将第一个用例的 1 修改成 2 来制造一个错误，现在来看看测试用例执行不通过的提示：
2.1.5 组合测试用例
如果有多个测试用例，它们之间存在关联关系，可以在外层使用 group 函数将它们组合在一起，示例代码如下：
void main() { //组合测试用例，判断Counter对象调用increase方法后是否等于1， // 并且判断Counter对象调用decrease方法后是否等 group('Counter', () { test('Increase a counter value should be 1', () { final counter = Counter(); counter.increase(); expect(counter.count, 1); }); test('Decrease a counter value should be -1', () { final counter = Counter(); counter.decrease(); expect(counter.count, -1); }); });}另外，除了上述启动方式外，还可以使用终端命令来启动测试用例，示例如下：
//flutter test 文件路径flutter test test/unit_test.dart//使用 flutter run 文件路径 的方式来运行到真机或模拟器上测试也是可以的2.2 使用 mockito 模拟外部依赖
进行单元测试时我们可能还需要从外部依赖（比如web服务）获取需要测试的数据，我们先来看一个示例，在 lib 中创建一个要测试的类：
//mock.dart import 'dart:convert';import 'package:http/http.dart' as http; class Todo { final String title; Todo({this.title}); //工厂类构造方法，将JSON转换为对象 factory Todo.fromJson(Map<String, dynamic> json) { return Todo( title: json['title'], ); }} Future<Todo> fetchTodo(http.Client client) async { //获取网络数据 final response = await client.get('https://xxx.com/todos/1'); if (response.statusCode == 200) { //请求成功，解析JSON return Todo.fromJson(json.decode(response.body)); } else { //请求失败，抛出异常 throw Exception('Failed to load post'); }}可以看到与 web 服务的数据交互是我们程序不能够控制的，很难覆盖所有可能成功或失败的用例，因此更好的办法是在测试用例中模拟这些”外部依赖“，让其可以返回特定内容。接下来我们来看看使用 mockito 模拟外部依赖的步骤：
2.2.1 添加依赖
在 pubspec.yaml 文件的 dev_dependencies 中添加 mockito 包：
dependencies: http: ^0.12.2 dev_dependencies: flutter_test: sdk: flutter mockito:2.2.2 创建模拟类
创建一个模拟类，示例如下：
//mock_test.dart import 'package:mockito/mockito.dart';import 'package:http/http.dart' as http; class MockClient extends Mock implements http.Client {}可以看到我们定义了一个模拟类 MockClient，这个类以接口声明的方式获取到了 http.Client 的外部接口。
2.2.3 编写测试用例
现在我们可以使用 when 语句，在其调用 Web 服务时注入 MockClient 并返回相应的数据，代码如下：
//mock_test.dart import 'package:flutter_test/flutter_test.dart';import 'package:flutter_unit_test/mock.dart';import 'package:mockito/mockito.dart';import 'package:http/http.dart' as http; class MockClient extends Mock implements http.Client {} void main() { group('fetchTodo', () { test('returns a Todo if successful', () async { final client = MockClient(); //使用Mockito注入请求成功的JSON字段 when(client.get('https://xxx.com/todos/1')) .thenAnswer((_) async => http.Response('{"title": "Test"}', 200)); //验证请求结果是否为Todo实例 expect(await fetchTodo(client), isInstanceOf<Todo>()); }); test('throws an exception if error', () { final client = MockClient(); //使用Mockito注入请求失败的Error when(client.get('https://xxx.com/todos/1')) .thenAnswer((_) async => http.Response('Forbidden', 403)); //验证请求结果是否抛出异常 expect(fetchTodo(client), throwsException); }); });}可以看到在第一个用例中我们为其注入了 json 结果，而在第二个用例中我们注入了一个 403 异常。我们来看看运行结果：
可以看到，在没有调用真实 Web 服务的情况下我们的程序成功地模拟出了正常和异常两种情况。
关于 Flutter 的单元测试部分先说到这里，细心的同学可能发现整个 Flutter 单元测试的模式跟 Android 是非常类似的。
三、UI 自动化测试
3.1 简单示例
为了测试 widget 类，我们需要使用 flutter _test package。拿一个 Flutter 默认的计时器应用模板为例：
它的 UI 测试用例可以这么来写：
//widget_test.dart import 'package:flutter/material.dart';import 'package:flutter_test/flutter_test.dart';import 'package:flutter_unit_test/widget.dart'; void main() { testWidgets('Counter increments UI test', (WidgetTester tester) async { //声明所需要验证的Widget对象(即MyApp)，并触发其渲染 await tester.pumpWidget(MyApp()); //查找字符串文本为'0'的Widget，验证查找成功 expect(find.text('0'), findsOneWidget); //查找字符串文本为'1'的Widget，验证查找失败 expect(find.text('1'), findsNothing); //查找' '按钮，施加点击行为 await tester.tap(find.byIcon(Icons.add)); //触发其渲染 await tester.pump(); //查找字符串文本为'0'的Widget，验证查找失败 expect(find.text('0'), findsNothing); //查找字符串文本为'1'的Widget，验证查找成功 expect(find.text('1'), findsOneWidget); });}右键点击该文件，选择 Run 'tests in widget_test.dart' 选项执行测试，测试结果如下：
3.2 相关步骤以及API详解
flutter_test package 提供了以下工具用于 widget 的测试：
- testWidgets() ：此函数会自动为每个测试创建一个 WidgetTester，用来代替普通的 test 函数。
- WidgetTester：使用该类可在测试环境下建立 widget 并与其交互。
- Finder ：该类可以方便我们在测试环境下查找 widgets。
- Mathcer 常量：该常量在测试环境下帮助我们验证 Finder 是否定位到一个或多个 widgets。
接下来我们来看看编写测试用例的相关步骤：
3.2.1 添加 flutter_test 依赖
在 pubspec.yaml 文件的 devdependencies 里添加 fluttertest 依赖，代码如下：
dev_dependencies: flutter_test: sdk: flutter3.2.2 创建用于测试的 widget
还是拿 Flutter 默认的计时器应用模板为例，代码如下：
import 'package:flutter/material.dart'; void main() { runApp(MyApp());} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }} class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();} class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter ; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }}3.2.3 创建一个 testWidgets 测试方法
用 flutter_test package 提供的 testWidgets() 函数定义一个测试。testWidgets 函数可以定义一个 widget 测试并创建一个可以使用的 WidgetTester。
import 'package:flutter_test/flutter_test.dart'; void main() { testWidgets('Counter increments UI test', (WidgetTester tester) async { });}3.2.4 使用 WidgetTester 建立并渲染 widget
在上一步中我们创建了一个 WidgetTester，使用 WidgetTester 可以在测试环境下建立、渲染 widget 并可以与其进行交互。接下来我们来介绍下 WidgetTester 中常见的 api。
创建/渲染类API
- pumpWidget(Widget widget) ：创建并渲染我们提供的 widget。
- pump(Duration duration)：触发 widget 重建。与 pumpWidget 不同之处在于即使 widget 与先前的调用相同， pumpWidget 也会强制完全重建树，而 pump 将仅重建已更改的 widget。例如我们点击调用 setState() 的按钮，可以使用 pump 方法来让 flutter 再一次建立我们的 widget。
- pumpAndSettle()：在给定期间内不断重复调用 pump() 直到完成所有绘制帧，一般需要等到所有动画全部完成。
交互类API
- enterText()：模拟输入文本。
- tap()：模拟点击按钮。
- drag()：模拟滑动。
- longPress()：模拟长按。
其他方法这里不再赘述，如果想深入理解这些内容，可以参考 WidgetTester 进行学习。
3.2.5 使用 Finder 定位（查找） widget
在测试环境下，为了定位 widget，我们需要用到 Finder 类。
text(String text)：查找含有特定文本的 widget，例如 find.text('0')。
widgetWithText()：限定 widget 的类型，并且该类型 widget 包含给定的文本，例如 find.widgetWithText(Button, '0')。
byKey(Key key)：使用具体 key 查找 widget。例如 find.byKey(Key('H'))。
byType(Type type)：根据 type 来寻找对应的 widget，type 参数必须是 Widget 的子类，例如 find.byType(IconButton)。
byWidget(Widget widget)：根据 widget 实例来寻找对应的 widget。示例如下：
Widget myButton = new Button( child: new Text('Update')); find.byWidget(myButton);- byWidgetPredicate()：根据 widget 的属性匹配 widget，示例如下：
find.byWidgetPredicate( (Widget widget) => widget is Tooltip && widget.message == 'Back', description: 'widget with tooltip "Back"',)
如果想深入理解这些内容，可以参考 CommonFinders 进行学习。
3.2.6、使用 Matcher 常量进行验证
flutter_test 提供了以下 matchers：
- findsOneWidget：找到一个 widget
- findsWidgets：找到一个或多个 widget
- findsNothing：没有找到 widget
- findsNWidgets：找到指定数量的 widget
例如：
//查找字符串文本为'0'的Widget，验证查找失败expect(find.text('0'), findsNothing);通过以上步骤，我们对 widget 测试有了一定的了解了，现在我们再来看看上面写的那个 widget 测试用例可以有更深刻的认识了：
import 'package:flutter/material.dart';import 'package:flutter_test/flutter_test.dart';import 'package:flutter_unit_test/widget.dart'; void main() { testWidgets('Counter increments UI test', (WidgetTester tester) async { //声明所需要验证的Widget对象(即MyApp)，并触发其渲染 await tester.pumpWidget(MyApp()); //查找字符串文本为'0'的Widget，验证查找成功 expect(find.text('0'), findsOneWidget); //查找字符串文本为'1'的Widget，验证查找失败 expect(find.text('1'), findsNothing); //查找' '按钮，施加点击行为 await tester.tap(find.byIcon(Icons.add)); //触发其渲染 await tester.pump(); //查找字符串文本为'0'的Widget，验证查找失败 expect(find.text('0'), findsNothing); //查找字符串文本为'1'的Widget，验证查找成功 expect(find.text('1'), findsOneWidget); });}尽管 widget 测试扩大了应用的测试范围，可以找到单元测试无法找到的问题，不过相比于单元测试来说，widget 测试用例的开发和维护成本非常高，因此建议在项目达到一定的规模，并且业务特征具有一定的延续规律后，再考虑 widget 测试的必要性。
更多精彩请关注腾讯VTeam技术团队公众号
