How to use jest-image-snapshot - 10 common examples

*/
'use strict';

/* eslint-env jest */

const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');
const {configureToMatchImageSnapshot} = require('jest-image-snapshot');
const {startServer} = require('../../test-utils');
const ApiClient = require('../../../src/server/api/client');
const {writeSeedDataToApi} = require('../../../src/shared/seed-data/seed-data.js');

const SEED_DATA_PATH = path.join(__dirname, '../../fixtures/seed-data.json');

const toMatchImageSnapshot = configureToMatchImageSnapshot({
  // FIXME: we're more forgiving in Travis where font rendering on linux creates small changes
  failureThreshold: process.env.TRAVIS ? 0.05 : 0.001,
  failureThresholdType: 'percent',
});

expect.extend({toMatchImageSnapshot});

module.exports = state => {
  state.debug = Boolean(process.env.DEBUG);

  describe('initialize', () => {
    it('should initialize a server', async () => {
      state.server = await startServer();
      state.rootURL = `http://localhost:${state.server.port}`;
      state.client = new ApiClient({rootURL: state.rootURL});
    });

import { promisify } from 'util';
import getPort from 'get-port';
import handler from 'serve-handler';

import createPageObjects from './pageObjects/index';
import marshal from './marshal';
import retry from './retry';
import setupTestEnvironment from './setupTestEnvironment';

const BROWSER_NAME = process.env.WEBCHAT_TEST_ENV || 'chrome-docker';
// const BROWSER_NAME = 'chrome-docker';
// const BROWSER_NAME = 'chrome-local';
const NUM_RETRIES = 3;

expect.extend({
  toMatchImageSnapshot: configureToMatchImageSnapshot({
    customSnapshotsDir: join(__dirname, '../__image_snapshots__', BROWSER_NAME)
  })
});

let driverPromise;
let serverPromise;

const DEFAULT_OPTIONS = {
  pingBotOnLoad: true
};

global.setupWebDriver = async options => {
  options = { ...DEFAULT_OPTIONS, ...options };

  if (!driverPromise) {
    driverPromise = retry(async () => {

/* eslint-env jest */
import 'expect-puppeteer';
import execa from 'execa';
import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
import { setBrowserViewport, activatePlugin } from '@wordpress/e2e-test-utils';
import { resetSite } from './helpers';

const toMatchImageSnapshot = configureToMatchImageSnapshot({
  // @TODO(mAAdhaTTah) high for CI – can we reduce?
  failureThreshold: 0.06,
  failureThresholdType: 'percent',
  customDiffConfig: {
    threshold: 0.15,
  },
});

expect.extend({ toMatchImageSnapshot });

const { PUPPETEER_TIMEOUT } = process.env;

// The Jest timeout is increased because these tests are a bit slow
jest.setTimeout(Number(PUPPETEER_TIMEOUT) || 100000);

beforeAll(async () => {

const { configureToMatchImageSnapshot } = require('jest-image-snapshot');

const IS_DEV = process.env.E2E === 'dev';

// in the headless (dev) mode font rendering is slightly different
// so we need higher threshold
// in CI, it's a perfect match, thus 0.01
// you should always save/update snapshots via
// yarn test:e2e / yarn test:e2e:update
const customConfig = { threshold: IS_DEV ? 0.1 : 0.01 };
const toMatchImageSnapshot = configureToMatchImageSnapshot({
  customDiffConfig: customConfig
});
expect.extend({ toMatchImageSnapshot });

it('should be able to use configureToMatchImageSnapshot in a test', () => {
    const matchFn = configureToMatchImageSnapshot({
        noColors: true,
        customDiffConfig: {
            threshold: 5,
            includeAA: false
        },
        failureThreshold: 10,
        failureThresholdType: 'percent'
    });
    expect.extend({ toMatchImageSnapshot: matchFn });

    expect('Me').toMatchImageSnapshot();
});

function configureJest() {
  const toMatchImageSnapshot = configureToMatchImageSnapshot({
    customDiffDir: '__artifacts__',
    diffDirection: 'vertical',
  });
  expect.extend({toMatchImageSnapshot});
}

import {configureToMatchImageSnapshot} from 'jest-image-snapshot';
import expect from 'expect';

require('debug-utils').default();


const toMatchImageSnapshot = configureToMatchImageSnapshot({
  customDiffConfig: {failureThreshold: .01}
});

expect.extend({toMatchImageSnapshot});

import { configureToMatchImageSnapshot } from 'jest-image-snapshot';

let toMatchImageSnapshot = configureToMatchImageSnapshot({
  failureThresholdType: 'percent',
});

const { E2E_DEBUG } = process.env;

if (E2E_DEBUG === 'true') {
  toMatchImageSnapshot = () => ({ pass: true });
}

expect.extend({ toMatchImageSnapshot });

import { configureToMatchImageSnapshot } from 'jest-image-snapshot';

const customConfig = { threshold: 0.01 };
export const toMatchImageSnapshot = configureToMatchImageSnapshot({
  customDiffConfig: customConfig,
  failureThreshold: 0.005,
  failureThresholdType: 'percent',
});

expect.extend({ toMatchImageSnapshot });

export const JEST_TIMEOUT = 10000;
jest.setTimeout(JEST_TIMEOUT);

);
  const snapshotDotPath = path.join(
    snapshotsDir,
    `${snapshotIdentifier}${dotSnap}`
  );

  const diffDir = customDiffDir
    ? path.join(process.cwd(), customDiffDir, relativePath)
    : path.join(snapshotsDir, '__diff_output__');
  const diffDotPath = path.join(diffDir, `${snapshotIdentifier}${dotDiff}`);

  if (fs.pathExistsSync(snapshotDotPath)) {
    fs.copySync(snapshotDotPath, snapshotKebabPath);
  }

  snapshotResult = diffImageToSnapshot({
    snapshotsDir,
    diffDir,
    receivedImageBuffer,
    snapshotIdentifier,
    failureThreshold,
    failureThresholdType,
    updateSnapshot: updateSnapshots,
    ...options,
  });

  const { pass, added, updated, diffOutputPath } = snapshotResult;

  if (!pass && !added && !updated) {
    fs.copySync(diffOutputPath, diffDotPath);
    fs.removeSync(diffOutputPath);
    fs.removeSync(snapshotKebabPath);