Jest Pixel Perfect
Jest matcher to check if your frontend matches the design.
Installation
With npm:
npm install --save-dev jest-pixel-perfect
With yarn:
yarn add -D jest-pixel-perfect
Usage
;;;; ;
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
"jest":
Jest <v23
"jest":
If you are already using another test framework, like jest-chain, then you should create a test setup file and require
each of the frameworks you are using.
For example:
// ./testSetup.js;;;
Then in your Jest config:
"jest":
Default Configuration
You can set a default configuration (for example to use the same token everywhere) by using a setup file:
// ./testSetup.jsconst setDefaultConfiguration = ;;; ;
Typescript
If your editor does not recognize the custom jest-pixel-perfect
matchers, add a global.d.ts
file to your project with:
;