Allow preprocessing images before comparison

README.md

@@ -45,6 +45,7 @@ See [the examples](./examples/README.md) for more detailed usage
 * `noColors`: (default `false`) Removes colouring from console output, useful if storing the results in a file
 * `failureThreshold`: (default `0`) Sets the threshold that would trigger a test failure based on the `failureThresholdType` selected. This is different to the `customDiffConfig.threshold` above, that is the per pixel failure threshold, this is the failure threshold for the entire comparison.
 * `failureThresholdType`: (default `pixel`) (options `percent` or `pixel`) Sets the type of threshold that would trigger a failure.
+* `beforeComparison`: (default `(received, baseline) => ({ received, baseline })`) Optional function for preprocessing images before comparison. Could be used to crop or align images in size before passing to pixelmatch. Should return a `PNG` instance from `pngjs` module.
 
 ```javascript
   it('should demonstrate this matcher`s usage with a custom pixelmatch config', () => {

__tests__/__snapshots__/index.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`toMatchImageSnapshot passes diffImageToSnapshot everything it needs to create a snapshot and compare if needed 1`] = `
 Object {
+  "beforeComparison": [Function],
   "customDiffConfig": Object {},
   "failureThreshold": 0,
   "failureThresholdType": "pixel",

__tests__/diff-snapshot.spec.js

@@ -412,5 +412,25 @@ describe('diff-snapshot', () => {
         });
       }).toThrowErrorMatchingSnapshot();
     });
+
+    it('should call custom preprocessing function', () => {
+      const diffImageToSnapshot = setupTest({ snapshotExists: true });
+      const beforeComparison = jest.fn((received, baseline) => ({ received, baseline }));
+
+      diffImageToSnapshot({
+        receivedImageBuffer: mockImageBuffer,
+        snapshotIdentifier: mockSnapshotIdentifier,
+        snapshotsDir: mockSnapshotsDir,
+        updateSnapshot: false,
+        failureThreshold: 0,
+        failureThresholdType: 'pixel',
+        beforeComparison,
+      });
+
+      expect(beforeComparison).toHaveBeenCalledWith(
+        expect.any(Object),
+        expect.any(Object)
+      );
+    });
   });
 });

__tests__/index.spec.js

@@ -308,6 +308,7 @@ describe('toMatchImageSnapshot', () => {
       updateSnapshot: false,
       failureThreshold: 0,
       failureThresholdType: 'pixel',
+      beforeComparison: expect.any(Function),
     });
     expect(Chalk).toHaveBeenCalledWith({
       enabled: false,

src/diff-snapshot.js

@@ -28,6 +28,7 @@ function diffImageToSnapshot(options) {
     customDiffConfig = {},
     failureThreshold,
     failureThresholdType,
+    beforeComparison = (received, baseline) => ({ received, baseline }),
   } = options;
 
   let result = {};
@@ -41,8 +42,11 @@ function diffImageToSnapshot(options) {
 
     const diffConfig = Object.assign({}, defaultDiffConfig, customDiffConfig);
 
-    const receivedImage = PNG.sync.read(receivedImageBuffer);
-    const baselineImage = PNG.sync.read(fs.readFileSync(baselineSnapshotPath));
+    const rawReceivedImage = PNG.sync.read(receivedImageBuffer);
+    const rawBaselineImage = PNG.sync.read(fs.readFileSync(baselineSnapshotPath));
+    const processedResult = beforeComparison(rawReceivedImage, rawBaselineImage);
+    const receivedImage = processedResult.received;
+    const baselineImage = processedResult.baseline;
 
     if (
       receivedImage.height !== baselineImage.height || receivedImage.width !== baselineImage.width

src/index.js

@@ -29,6 +29,7 @@ function configureToMatchImageSnapshot({
   noColors: commonNoColors = false,
   failureThreshold: commonFailureThreshold = 0,
   failureThresholdType: commonFailureThresholdType = 'pixel',
+  beforeComparison: commonBeforeComparison = (received, baseline) => ({ received, baseline }),
 } = {}) {
   return function toMatchImageSnapshot(received, {
     customSnapshotIdentifier = '',
@@ -37,6 +38,7 @@ function configureToMatchImageSnapshot({
     noColors = commonNoColors,
     failureThreshold = commonFailureThreshold,
     failureThresholdType = commonFailureThresholdType,
+    beforeComparison = commonBeforeComparison,
   } = {}) {
     const { testPath, currentTestName, isNot } = this;
     const chalk = new Chalk({ enabled: !noColors });
@@ -55,6 +57,7 @@ function configureToMatchImageSnapshot({
       customDiffConfig: Object.assign({}, commonCustomDiffConfig, customDiffConfig),
       failureThreshold,
       failureThresholdType,
+      beforeComparison,
     });
 
     let pass = true;