Generate image snapshots of React components for visual regression testing.
This package will only give you the image, you'll have to diff it with something else (like jest-image-snapshot).
npm install component-image
import { generateImage } from 'component-image';
generateImage(component, options);options = {
// Path to .css file
stylesheet: undefined;
// Change size of screenshot
viewport: {
width: 800,
height: 600,
},
renderer: ReactDOMServer.renderToStaticMarkup,
image: {
// Path to save image, likely unnecessary
path: undefined,
},
// Options that are passed to Puppeteer
puppeteerOptions: {}
}Usage with jest-image-snapshot:
import React from 'react';
import { generateImage } from 'component-image'
const component = (
<div>
<h1>The Component</h1>
</div>
);
describe('Test Component', () => {
it('has no visual regressions', () => {
return generateImage(component, {
stylesheet: '../../style.css',
viewport: {
width: 1000,
height: 860
}
}).then(image => {
expect(image).toMatchImageSnapshot();
});
};
};