Skip to content

📷 Generate image snapshots of React components for visual regression testing

Notifications You must be signed in to change notification settings

corygibbons/component-image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 codeship code style: prettier

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

  };
};

About

📷 Generate image snapshots of React components for visual regression testing

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •