corygibbons / component-image

📷 Generate image snapshots of React components for visual regression testing

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();
    });

  };
};