Jest React Snapshot

Snapshot react components as images in jest tests

Usage

import { imageToMatchSnapshot } from "jest-react-snapshot";

expect.extend({ imageToMatchSnapshot });

it("renders component matching snapshot", async (): Promise<void> => {
    await expect(<Component {...props} />).imageToMatchSnapshot();
});

See repo test for more details.

Advanced Usage

Uses jest-image-snapshot to power the image snapshot and diffing functionality.

Supports the toMatchImageSnapshot API, providing some default configuration.

await expect(<Component {...props} />).imageToMatchSnapshot(customOptions);

Test Environment Setup

Easiest way is to use jest-puppeeter which provides sensible defaults for your testing environment.

Example Jest Config

    "jest": {
        "preset": "jest-puppeteer",
        "moduleDirectories": [
            "./src",
            "./tests",
            "./node_modules"
        ],
        "transform": {
            "^.+\\.tsx?$": "ts-jest"
        },
        "testPathIgnorePatterns": [
            "./artifacts/",
            "./node_modules/"
        ]
    }

Further Work

• Replace puppeteer with lighter renderer as only the HTML and CSS layout engine is used.