corygibbons / Component Image
📷 Generate image snapshots of React components for visual regression testing
Stars: ✠40
Programming Languages
javascript
184084 projects - #8 most used programming language
Component Image
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
).
Usage
Install
npm install component-image
Use
import { generateImage } from 'component-image';
generateImage(component, options);
Default 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: {}
}
Integration Example
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();
});
};
};
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].