https://github.com/iamogbz/jest-react-snapshot

📷 Snapshot react components as images in jest tests
https://github.com/iamogbz/jest-react-snapshot

dom-image image jest node nodejs react snapshot testing typescript

Last synced: 3 months ago
JSON representation

📷 Snapshot react components as images in jest tests

• Host: GitHub
• URL: https://github.com/iamogbz/jest-react-snapshot
• Owner: iamogbz
• License: gpl-3.0
• Created: 2020-01-10T05:57:17.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-08-23T04:58:00.000Z (almost 3 years ago)
• Last Synced: 2025-09-21T09:05:54.234Z (9 months ago)
• Topics: dom-image, image, jest, node, nodejs, react, snapshot, testing, typescript
• Language: TypeScript
• Homepage: https://ogbizi.com/jest-react-snapshot/
• Size: 1010 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# Jest React Snapshot



[![Build Status](https://github.com/iamogbz/jest-react-snapshot/workflows/Build/badge.svg)](https://github.com/iamogbz/jest-react-snapshot/actions)

[![Coverage Status](https://coveralls.io/repos/github/iamogbz/jest-react-snapshot/badge.svg?branch=refs/heads/master)](https://coveralls.io/github/iamogbz/jest-react-snapshot?branch=refs/heads/main)

[![NPM Version](https://img.shields.io/npm/v/jest-react-snapshot.svg)](https://www.npmjs.com/package/jest-react-snapshot)

> Snapshot react components as images in jest tests

## Usage

```typescript

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

expect.extend({ imageToMatchSnapshot });

it("renders component matching snapshot", async (): Promise => {

    await expect().imageToMatchSnapshot();

});

```

See [repo test](./tests/index.test.tsx) for more details.

![image-to-match-snapshot](https://raw.githubusercontent.com/iamogbz/jest-react-snapshot/main/tests/__image_snapshots__/index-test-tsx-image-to-match-snapshot-renders-component-as-image-and-matches-snapshot-3-snap.png)

### Advanced Usage

Uses [`jest-image-snapshot`](https://github.com/americanexpress/jest-image-snapshot) to power the image snapshot and diffing functionality.

Supports the `toMatchImageSnapshot` [API](https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api), providing some default configuration.

```typescript

await expect().imageToMatchSnapshot(customOptions);

```

### Test Environment Setup

Easiest way is to use [`jest-puppeeter`](https://github.com/smooth-code/jest-puppeteer) which provides sensible defaults for your testing environment.

#### Example Jest Config

```json

    "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.