Fest
Flutter Snapshot Testing

A simple snapshot testing utility for flutter inspired by Jest. Perform integration testing and compare snapshots ranging from Screenshots, Render Tree and Layer Tree.

Key Features • Install • How To Use • Run • Email • Credits • Related • License

Key Features

• Easy helper methods to perform snapshot testing of UI elements
• Compare snapshots such as Screensot, Render Tree and Layer Tree
• Remove dynamic text and widgets in your snapshot using Regex
  • While we perform End to End testing or UI testing, its desirable that everything is mocked out, But for the projects which have dynamic content such as dates, timers etc can use regex to remove them from the snapshot.
• Cross platform
  • Windows, macOS and Linux ready.

Install

Add this package under dev_dependencies:

dev_dependencies:
  fest: ^0.1.2

And then run:

flutter pub get

Setup snapshot directory in the root of your project :

mkdir integration-tests
mkdir integration-tests/snaps

Create a file named app.dart inside integration-tests directory with the following contents:

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

void main() {
  
  enableFlutterDriverExtension();

  app.main();
}

Create app_test.dart inside integration-tests directory:

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);
    });
  });
}

Running the tests

Running CLI:

$ flutter pub run fest -h

flutter Snapshot Testing Tool
 --driver-path (-d)             Supply the absolute or relative path of the app driver (default: integration-tests/app.dart)
 --tests-path (-t)              Supply the absolute or relative path of the folder containing tests (default: integration-tests/)
 --snaps-path (-p)              Supply the absolute or relative path of the folder to store snapshots (default: integration-tests/snaps/)
 --update-snapshots (-u)        Update all snapshots (all tests passes and the new snapshots are saved)
 --help (-h)                    Help

Running app_test.dart

$ flutter pub run fest

Note: When we run this for the first time, all the tests pass and the snapshot is captured. On the following runs, the new snapshot is compared with old snapshot.

To update all snapshots:

$ flutter pub run fest -u

To update a specific snapshot, we have to delete the exisiting snapshot file until an interactive test run can be implemented.

How To Use

Using this package, we can easily perform snapshot testing using these following utility functions :

// This generates an image snapshot
Future<void> toMatchImageSnapshot(String id) async;

This creates a .image file which is list of integers representing the screenshot

// This generates a render tree snapshot
Future<void> toMatchRenderTreeSnapshot(String id, {List<RegExp>? removeExps}) async;

This creates a .render file which contains the complete render tree when the above function is executed

// This generates a layer tree snapshot
Future<void> toMatchLayerTreeSnapshot(String id, {List<RegExp>? removeExps}) async;

This creates a .layer file which is contains the complete layer tree when the above function is executed

Advanced Usage

We can programatically remove parts if the render tree or layer tree which is currently dynamic, i.e. time, dates, coundowns etc. using regex.

The second argument for the above three helper methods is a list of regex to remove form the snapshot.

Note: If we add a regex after a snapshot has been created, we need to delete than snapshot and recteate it.

Email

Fest is an Snapshot Testing tool. Meaning, if you liked using this app or it has helped you in any way, I'd like you send me an email at nithinhrao@gmail.com about anything you'd want to say about this software. I'd really appreciate it!

Credits

This software uses the following open source packages:

• Dart
• Flutter
• Jest
• Mockito
• Args
• Build Runner
• Equatable
• Emojis are taken from here

Related

integration-testing - Flutter Integration testing

Support

License

MIT

---

GitHub @dopecoder  ·  Twitter @dopecoder