@penx/component-image

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

  };
};