Jest matcher to check if your frontend matches the design.
With npm:
npm install --save-dev jest-pixel-perfectWith yarn:
yarn add -D jest-pixel-perfectimport React from 'react';
import { render } from '@testing-library/react';
import { generateImage } from 'jsdom-screenshot';
import App from './App';
test('is pixel perfect', async () => {
render(<App />);
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
Add jest-pixel-perfect to your Jest setupFilesAfterEnv configuration. See for help
"jest": {
"setupFilesAfterEnv": ["jest-pixel-perfect"]
}"jest": {
"setupTestFrameworkScriptFile": "jest-pixel-perfect"
}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
require('jest-pixel-perfect');
require('jest-chain');
require('any other test framework libraries you are using');Then in your Jest config:
"jest": {
"setupTestFrameworkScriptFile": "./testSetup.js"
}You can set a default configuration (for example to use the same token everywhere) by using a setup file:
// ./testSetup.js
const { setDefaultConfiguration } = require('jest-pixel-perfect');
require('jest-chain');
require('any other test framework libraries you are using');
setDefaultConfiguration({
figmaToken: process.env.FIGMA_TOKEN,
xdToken: process.env.XD_TOKEN,
});If your editor does not recognize the custom jest-pixel-perfect matchers, add a global.d.ts file to your project with:
import 'jest-pixel-perfect';