Generate image snapshots of React components
npm install component-imageGenerate 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).
#### Install
``
npm install component-image
#### Use
`js
import { generateImage } from 'component-image';
generateImage(component, options);
`
#### Default options
`js`
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:
`js
import React from 'react';
import { generateImage } from 'component-image'
const component = (
describe('Test Component', () => {
it('has no visual regressions', () => {
return generateImage(component, {
stylesheet: '../../style.css',
viewport: {
width: 1000,
height: 860
}
}).then(image => {
expect(image).toMatchImageSnapshot();
});
};
};
``