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

  };
};