[Feature] Specify threshold per test

[tremorth]

Hi,

I am currently using puppeteer, jest and jest-puppeteer with your jest-screenshot.

My goal is to do a visual testing suite.

I have certain test cases, where there's cursor blinking or animations are in motion. These cases will result tests failing. Also adding waits or other hacks to overcome these problems would not be ideal.

Would there be a possibility to pass threshold arguments to the toMatchImageSnapshot function?

I would like to specify thresholds for different snapshot cases. For cases with animations and for cases without animations.

For example:

expect(await page.screenshot({fullPage: true})).toMatchImageSnapshot({pixelThresholdAbsolute: 18});

[tremorth]

I found a solution using custom assertions from documentation.

It is possible to import toMatchImageSnapshot() for custom assertions. As it requires configuration as second argument, config() function (which is responsible for reading configuration from jest-screenshot.json/package.json) is also exposed.

import {config, toMatchImageSnapshot} from 'jest-screenshot';

expect.extend({
  customMatcher(received, name) {
    const image = customGetImage(received); // i.e. via puppeteer, html2canvas etc
    const configuration = config(); // get existing config
    if(process.env.LOOSE_SCREENSHOTS_MATCH) {
        // loose mismatch threshold for specific environment setting
        configuration.pixelThresholdRelative = configuration.pixelThresholdRelative + 0.1
    }
    return toMatchImageSnapshot.call(this, image, configuration, {
        // build custom path for screenshot
        path: `/custom_file_path/${configuration.snapshotsDir}/custom_file_prefix_${name}.png`
    });
  }
});

In my case I need a different snapshots based on OS and also a way to pass threshold per test case.

Here's my usage:

const {config, toMatchImageSnapshot} = require('jest-screenshot');

expect.extend({
    screenshotMatcher(received, threshold) {
        const configuration = config();
        configuration.snapshotsDir = `__snapshots__/${snapshotDirectory}`;

        // loose mismatch threshold for blinking cursors and other animations

        if(threshold) {
            configuration.pixelThresholdAbsolute= threshold;
            configuration.pixelThresholdRelative = null;
        } else {
            configuration.pixelThresholdRelative = 0;
            configuration.pixelThresholdAbsolute= 0;
        }

        return toMatchImageSnapshot.call(this, received, configuration);
    }
});

Here's a test call with puppeteer.

expect(await page.screenshot({fullPage: true})).screenshotMatcher(absolutePixelThreshold);