❤Nervous Parrot Muttering

npm

Sign UpSign In
Wondering what’s next for npm?Check out our public roadmap! »

jest-react-snapshotTypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

Jest React Snapshot

logo

Dependabot badge Dependencies Build Status Coverage Status

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.

const defaultOptions: MatchImageSnapshotOptions = {
    blur: 2,
    customDiffConfig: { threshold: 0.5 },
    failureThreshold: 0.05,
    failureThresholdType: "percent",
};
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.

Keywords

Install

npm i jest-react-snapshot

DownloadsWeekly Downloads

3

Version

0.1.0

License

GPL-3.0

Unpacked Size

890 kB

Total Files

5

Homepage

github.com/iamogbz/jest-react-snapshot#readme

Repository

Gitgithub.com/iamogbz/jest-react-snapshot

Last publish

Collaborators

  • avatar
Try on RunKit
Report malware