Rax Component Image

This repository is inspired by component-image

Generate image snapshots of Rax 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 rax-component-image

Use

import { generateImage } from 'rax-component-image';

generateImage(component, options);

Default options

options = {
  // Path to .css file
  stylesheet: undefined;
  // Change size of screenshot
  viewport: {
    width: 800,
    height: 600,
  },
  renderer: RaxServerRenderer.renderToString,
  image: {
    // Path to save image, likely unnecessary
    path: undefined,
  }
}

Integration Example

Usage with jest-image-snapshot:

import { createElement } from 'rax';
import { generateImage } from 'rax-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();
    });

  };
};