@penx/component-image
v1.0.2
Published
Generate image snapshots of React components
Downloads
5
Readme
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;
viewport: {
width: 800,
height: 600,
},
image: {
// path to save image, likely not necessary
path: undefined,
}
}
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();
});
};
};