@penx/component-image

1.0.2 • Public • Published

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).

npm version Build Status codecov

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

  };
};

Readme

Keywords

Package Sidebar

Install

npm i @penx/component-image

Weekly Downloads

4

Version

1.0.2

License

MIT

Last publish

Collaborators

  • penx