• Version 6.4.0
  • Published
  • 9.68 kB
  • 3 dependencies
  • MIT license


npm i @types/jest-image-snapshot
yarn add @types/jest-image-snapshot
pnpm add @types/jest-image-snapshot


TypeScript definitions for jest-image-snapshot



function configureToMatchImageSnapshot

configureToMatchImageSnapshot: (
options: MatchImageSnapshotOptions
) => () => { message(): string; pass: boolean };
  • Configurable function that can be passed to jest's expect.extend. Example: import { configureToMatchImageSnapshot } from 'jest-image-snapshot'; const toMatchImageSnapshot = configureToMatchImageSnapshot({ noColors: true }); expect.extend({ toMatchImageSnapshot });

function toMatchImageSnapshot

toMatchImageSnapshot: (options?: MatchImageSnapshotOptions) => {
message(): string;
pass: boolean;
  • Function to be passed to jest's expect.extend. Example: import { toMatchImageSnapshot } from 'jest-image-snapshot'; expect.extend({ toMatchImageSnapshot });

function updateSnapshotState

updateSnapshotState: <TObject, TPartial>(
originalSnapshotState: TObject,
partialSnapshotState: TPartial
) => TObject & TPartial;
  • Mutates original state with new state


interface MatchImageSnapshotOptions

interface MatchImageSnapshotOptions {}

    property allowSizeMismatch

    allowSizeMismatch?: boolean | undefined;
    • If set to true, the build will not fail when the screenshots to compare have different sizes. false

    property blur

    blur?: number | undefined;
    • Applies Gaussian Blur on compared images, accepts radius in pixels as value. Useful when you have noise after scaling images per different resolutions on your target website, usually setting its value to 1-2 should be enough to solve that problem. 0.

    property comparisonMethod

    comparisonMethod?: 'pixelmatch' | 'ssim' | undefined;
    • The method by which images are compared. pixelmatch does a pixel by pixel comparison, whereas ssim does a structural similarity comparison. 'pixelmatch'

    property customDiffConfig

    customDiffConfig?: PixelmatchOptions | Partial<SSIMOptions> | undefined;
    • Custom config passed to 'pixelmatch' or 'ssim'

    property customDiffDir

    customDiffDir?: string | undefined;
    • A custom absolute path of a directory to keep this diff in

    property customReceivedDir

    customReceivedDir?: string | undefined;
    • A custom absolute path of a directory to keep this received image in.

    property customReceivedPostfix

    customReceivedPostfix?: string | undefined;
    • A custom postfix which is added to the snapshot name of the received image '-received'

    property customSnapshotIdentifier

    | ((parameters: {
    testPath: string;
    currentTestName: string;
    counter: number;
    defaultIdentifier: string;
    }) => string)
    | string
    | undefined;
    • A custom name to give this snapshot. If not provided, one is computed automatically. When a function is provided it is called with an object containing testPath, currentTestName, counter and defaultIdentifier as its first argument. The function must return an identifier to use for the snapshot.

    property customSnapshotsDir

    customSnapshotsDir?: string | undefined;
    • Custom snapshots directory. Absolute path of a directory to keep the snapshot in.

    property diffDirection

    diffDirection?: 'horizontal' | 'vertical' | undefined;
    • Changes diff image layout direction. 'horizontal'

    property dumpDiffToConsole

    dumpDiffToConsole?: boolean | undefined;
    • Will output base64 string of a diff image to console in case of failed tests (in addition to creating a diff image). This string can be copy-pasted to a browser address string to preview the diff for a failed test. false

    property dumpInlineDiffToConsole

    dumpInlineDiffToConsole?: boolean | undefined;
    • Will output the image to the terminal using iTerm's Inline Images Protocol. If the term is not compatible, it does the same thing as dumpDiffToConsole. false

    property failureThreshold

    failureThreshold?: number | undefined;
    • Sets the threshold that would trigger a test failure based on the failureThresholdType selected. This is different to the customDiffConfig.threshold above - the customDiffConfig.threshold is the per pixel failure threshold, whereas this is the failure threshold for the entire comparison. 0.

    property failureThresholdType

    failureThresholdType?: 'pixel' | 'percent' | undefined;
    • Sets the type of threshold that would trigger a failure. 'pixel'.

    property maxChildProcessBufferSizeInBytes

    maxChildProcessBufferSizeInBytes?: number | undefined;
    • Sets the max number of bytes for stdout/stderr when running diff-snapshot in a child process. 10 * 1024 * 1024 (10,485,760)

    property noColors

    noColors?: boolean | undefined;
    • Removes coloring from the console output, useful if storing the results to a file. false.

    property onlyDiff

    onlyDiff?: boolean | undefined;
    • Either only include the difference between the baseline and the received image in the diff image, or include the 3 images (following the direction set by diffDirection). false

    property runInProcess

    runInProcess?: boolean | undefined;
    • Runs the diff in process without spawning a child process. false.

    property runtimeHooksPath

    runtimeHooksPath?: string | undefined;
    • This needs to be set to a existing file, like require.resolve('./runtimeHooksPath.cjs'). This file can expose a few hooks: - onBeforeWriteToDisc: before saving any image to the disc, this function will be called (can be used to write EXIF data to images for instance) - onBeforeWriteToDisc: (arguments: { buffer: Buffer; destination: string; testPath: string; currentTestName: string }) => Buffer

    property storeReceivedOnFailure

    storeReceivedOnFailure?: boolean | undefined;
    • Store the received images separately from the composed diff images on failure. This can be useful when updating baseline images from CI. false

    property updatePassedSnapshot

    updatePassedSnapshot?: boolean | undefined;
    • Updates a snapshot even if it passed the threshold against the existing one. false.


    namespace global

    namespace global {}

      namespace global.jest

      namespace global.jest {}

        interface Matchers

        interface Matchers<R, T> {}

          method toMatchImageSnapshot

          toMatchImageSnapshot: (options?: MatchImageSnapshotOptions) => R;

            Package Files (1)

            Dependencies (3)

            Dev Dependencies (0)

            No dev dependencies.

            Peer Dependencies (0)

            No peer dependencies.


            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/jest-image-snapshot.

            • Markdown
            • HTML
              <a href="https://www.jsdocs.io/package/@types/jest-image-snapshot"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>