https://github.com/ecologi/jest-pixel-perfect

Jest matcher to check if your frontend matches the design
https://github.com/ecologi/jest-pixel-perfect

figma jest jest-matchers jest-pixel-perfect pixel-perfect

Last synced: about 2 months ago
JSON representation

Jest matcher to check if your frontend matches the design

• Host: GitHub
• URL: https://github.com/ecologi/jest-pixel-perfect
• Owner: ecologi
• License: other
• Archived: true
• Created: 2020-05-22T15:30:37.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T06:56:06.000Z (almost 2 years ago)
• Last Synced: 2024-09-24T00:02:22.833Z (about 2 months ago)
• Topics: figma, jest, jest-matchers, jest-pixel-perfect, pixel-perfect
• Language: TypeScript
• Size: 3.46 MB
• Stars: 80
• Watchers: 2
• Forks: 3
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Jest Pixel Perfect

Jest matcher to check if your frontend matches the design.

[![Demo](./docs/screencast.png)](https://twitter.com/i/status/1263899580946681862)

## Installation

With npm:

```sh

npm install --save-dev jest-pixel-perfect

```

With yarn:

```sh

yarn add -D jest-pixel-perfect

```

## Usage

```js

import React from 'react';

import { render } from '@testing-library/react';

import { generateImage } from 'jsdom-screenshot';

import App from './App';

test('is pixel perfect', async () => {

  render();

  const screenshot = await generateImage({

    viewport: {

      width: 1280,

      height: 640,

    },

  });

  await expect(screenshot).toBePixelPerfect(URL_TO_FIGMA_FRAME);

});

```

You can pass different argument to `toBePixelPerfect`:

- a URL to a frame in a Figma file

- a URL to a frame in an XD file

- a path to a local PNG file

- a Buffer

## Setup

### Jest >v24

Add `jest-pixel-perfect` to your Jest `setupFilesAfterEnv` configuration. [See for help](https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array)

```json

"jest": {

  "setupFilesAfterEnv": ["jest-pixel-perfect"]

}

```

### Jest