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

0.2.1 • Public • Published

Jest React Snapshot

logo

Build Status Coverage Status NPM Version

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.

image-to-match-snapshot

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.

Package Sidebar

Install

npm i jest-react-snapshot

Weekly Downloads

2

Version

0.2.1

License

GPL-3.0

Unpacked Size

55.6 kB

Total Files

11

Last publish

Collaborators

  • iamogbz