jest-snapper

Introduction

jest-snapper generates mock props for a given React component, based on it's propTypes. Then it does a jest snapshot test for the component. Think - one line snapshot tests for your react components.

Prerequisites

jest-snapper assumes (and requires) you run it through jest. It makes advantage of the built-in snapshot testing capability of jest.

Example

// __tests__/MyReactComponent.jsx
import snaptest from 'jest-snapper';

snaptest('should render component', MyReactComponent);

Installation

yarn add jest-snapper

API

It has one export, which is default.

import snaptest from 'jest-snapper';
// or
const snaptest = require('jest-snapper');

This will infer propTypes from your component's props and run a snapshot test with deterministic values.

snaptest(
  description: string,
  component: typeof React.Component,
  {
    props: any?, // optional
    state: any?, // optional
  }
)

examples:

// Example 1: jest-snapper will generate props for you
snaptest('simple test', MyComponent);

// Example 2: You can selectively assign your own props
snaptest('with some overriden props', MyComponent, {
  props: {
    age: '42',
  },
});

// Example 3: Setting `state` will trigger a `this.setState`
// before the snapshot is taken.
snaptest('with a state change', MyComponent, {
  state: {
    textInputValue: 'foobar',
  },
});

Caveats

To minimize the effort needed to introduce this library to an existing codebase, I've made the decision to inject fake data generators (yes, like a cowboy) into PropTypes. This is a spartan solution, but works well. This is an area for possible future improvement.

Todo

Add multiple test permutations for oneOf and oneOfType propTypes
Expose mock data generator and allow the user to override it
Support better Typescript Typings

nickspiel / jest-snapper