Flutter插件fest的介绍与使用

简介

Fest
Flutter Snapshot Testing

Fest 是一个用于 Flutter 的简单快照测试工具，受 Jest 启发。它支持集成测试，并可以比较屏幕截图、渲染树和图层树。

主要特性

• 提供简单的辅助方法来执行 UI 元素的快照测试。
• 可以比较屏幕截图、渲染树和图层树。
• 使用正则表达式删除快照中的动态文本和小部件。
• 跨平台：Windows、macOS 和 Linux。

安装

添加此包到 dev_dependencies

dev_dependencies:
  fest: ^0.1.2

运行 flutter pub get

flutter pub get

在项目的根目录下设置快照目录

mkdir integration-tests
mkdir integration-tests/snaps

创建 app.dart 文件

在 integration-tests 目录下创建名为 app.dart 的文件，内容如下：

import 'package:flutter_driver/driver_extension.dart';
import 'package:<package>/main.dart' as app;

void main() {
  enableFlutterDriverExtension();
  app.main();
}

创建 app_test.dart 文件

在 integration-tests 目录下创建名为 app_test.dart 的文件，内容如下：

void main() {
  FlutterDriver? driver;
  Fest? snapTest;

  final splashScreenSelector = 'splash-screen';

  group('Resignal', () {
    setUpAll(() async {
      final opts = await SnapshotTestOptions.load();
      driver = await FlutterDriver.connect();
      snapTest = await Fest(driver: driver, options: opts);
    });

    tearDownAll(() async {
      driver?.close();
    });

    test('Test Login Screen', () async {
      await driver.waitForSelector('#$splashScreenSelector');
      await snapTest.matchRenderTreeSnapshot(splashScreenSelector);
    });
  });
}

运行测试

使用命令行运行

$ flutter pub run fest -h

flutter Snapshot Testing Tool
 --driver-path (-d)             提供应用驱动程序的绝对或相对路径（默认值：integration-tests/app.dart）
 --tests-path (-t)              提供包含测试的文件夹的绝对或相对路径（默认值：integration-tests/）
 --snaps-path (-p)              提供存储快照的文件夹的绝对或相对路径（默认值：integration-tests/snaps/）
 --update-snapshots (-u)        更新所有快照（所有测试通过并且新的快照被保存）
 --help (-h)                    帮助信息

运行 app_test.dart

$ flutter pub run fest

注意: 当我们第一次运行时，所有的测试都会通过并且会捕获快照。在后续的运行中，新的快照将与旧的快照进行比较。

更新所有快照

$ flutter pub run fest -u

更新特定快照

要更新特定的快照，我们需要删除现有的快照文件，直到实现交互式的测试运行。

如何使用

使用该插件，我们可以轻松地使用以下实用函数执行快照测试：

生成图像快照

// 生成图像快照
Future<void> toMatchImageSnapshot(String id) async;

这将创建一个 .image 文件，其中包含表示屏幕截图的整数列表。

生成渲染树快照

// 生成渲染树快照
Future<void> toMatchRenderTreeSnapshot(String id, {List<RegExp>? removeExps}) async;

这将创建一个 .render 文件，其中包含执行上述函数时的完整渲染树。

生成图层树快照

// 生成图层树快照
Future<void> toMatchLayerTreeSnapshot(String id, {List<RegExp>? removeExps}) async;