dferber90

Visual Regression Testing with Jest

This is a walkthrough of how to set up Visual Regression Testing with Jest for an application created with create-react-app.

The following walkthrough uses React as an example, but the approach should work for any modern frontend library! I assume it can be used with Angular, Vue, Cycle.js and more.

This gist walks you through a create-react-app application as an example of how to set up Visual Regression Testing in Jest using libraries I wrote recently which enable this: jsdom-screenshot, jest-transform-css and jest-transform-file.

dferber90

describe('when <SuperApp /> renders', () => {
  const wrapper = shallow(<SuperApp />)
    .find(Mouse)
    .renderProp('render', { x: 0, y: 0})
    .find(MouseDown)
    .renderProp('render', { down: true });

  it('should render a heading containing the coordinates', () => {
    expect(
      wrapper.equals(

dferber90

describe('when <App /> renders nested render props', () => {
  const wrapper = shallow(<SuperApp />);
  const mouseWrapper = shallow(
    <div>{wrapper.find(Mouse).prop('render')({ x: 0, y: 0 })}</div>
  );
  const mouseDownWrapper = shallow(
    mouseWrapper.find(MouseDown).prop('render')({ down: true })
  );

  it('should render a string containing the coordinates', () => {

dferber90

const SuperApp = () => (
  <div style={{ height: '100%' }}>
    <Mouse
      render={({ x, y }) => (
        <MouseDown
          render={({ down }) => (
            <h1>
              The mouse position is ({x}, {y})
              and the button is {down ? 'down' : 'up'}
            </h1>

dferber90

describe('when <App /> renders', () => {
  const wrapper = shallow(<App />)
    .find(Mouse)
    .renderProp('render', { x: 0, y: 0 });

  it('should render a headline containing the coordinates', () => {
    expect(wrapper.equals(<h1>The mouse position is (0, 0)</h1>)).toBe(true);
  });
});

dferber90

describe('when <App /> renders', () => {
  const wrapper = shallow(<App />);
  const mouseWrapper = shallow(
    wrapper.find(Mouse).prop('render')({ x: 0, y: 0 })
  );

  it('should render a string containing the coordinates', () => {
    expect(mouseWrapper.equals(<h1>The mouse position is (0, 0)</h1>)).toBe(
      true
    );

dferber90

describe('when <App /> renders', () => {
  const wrapper = shallow(<App />);

  it('should render a string containing the coordinates', () => {
    expect(wrapper.text()).toEqual('The mouse position is (0, 0)');
  });
});

dferber90

import { shallow } from 'enzyme'

describe('when the mouse moves', () => {
  const renderMock = jest.fn();
  const wrapper = shallow(<Mouse render={renderMock} />);
  wrapper.find('div').simulate('mousemove', {
    clientX: 50,
    clientY: 20,
  });

dferber90

import React from 'react';
import PropTypes from 'prop-types';

// Instead of using a HOC, we can share code using a
// regular component with a render prop!
class Mouse extends React.Component {
  static propTypes = {
    render: PropTypes.func.isRequired,
  };
  state = { x: 0, y: 0 };

dferber90

# enable ES6
parserOptions:
  ecmaVersion: 6
  sourceType: "module"
  ecmaFeatures:
    jsx: true # enable React's JSX

# register plugins
plugins:
  - meteor