Skip to content

Conversation

teimurjan
Copy link

Summary

This PR replaces pixelmatch with blazediff in the E2E testing infrastructure to improve image comparison performance.

Motivation

  • BlazeDiff is a faster alternative to pixelmatch for pixel-by-pixel image comparison.
  • Reduces test execution time by using a more performant diff algorithm

Implementation

  • Updated e2e/helpers.ts to use BlazeDiff instead of pixelmatch in the compareImages function
  • Replaced pixelmatch dependency with @blazediff/core. The API is compatible. Both libraries return the number of differing pixels.
  • Updated reference images because both the latest pixelmatch (v7) and BlazeDiff do not blend transparent pixels with white. (It ensures consistency in the comparison for transparent background images)

Impact

  • E2E testing infrastructure only
  • No changes to library functionality or public API

Integration

BlazeDiff is already integrated in:

Test Plan

Run the E2E test suite to verify image comparison still works correctly. The steps I followed are described in the docs: https://github.com/software-mansion/react-native-svg?tab=contributing-ov-file#running-e2e-tests.

What's required for testing (prerequisites)?

What are the steps to reproduce (after prerequisites)?

yarn e2e

Verify that:

  1. All E2E tests pass
  2. Image comparison still correctly identifies visual differences
  3. Diff images are generated properly when tests fail

Compatibility

OS Implemented
iOS
MacOS
Android
Web

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in README.md
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant