fest 0.1.3+1
fest: ^0.1.3+1 copied to clipboard

A simple snapshot testing utility for flutter inspired by jest. Compare and test snapshots ranging from Screenshots, Render Tree and Layer Tree.


Markdownify
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.

Pub Version

Key FeaturesInstallHow To UseRunEmailCreditsRelatedLicense

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:

integration-testing - Flutter Integration testing

Support #

Buy Me A Coffee

License #

MIT


GitHub @dopecoder  ·  Twitter @dopecoder

2
likes
100
pub points
0%
popularity

Publisher

nithinrao.dev

A simple snapshot testing utility for flutter inspired by jest. Compare and test snapshots ranging from Screenshots, Render Tree and Layer Tree.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

args, equatable, flutter_driver, meta, test

More

Packages that depend on fest