jest-snapshots

Jest snapshot test helper for React components with various props sets.

Used to DRY up and reduce boilerplate in tests. Low barrier to entry = less effort = encourage more tests. If no props are provided, they will be generated via react-fake-props.

You may need enzyme-to-json in your Jest configuration to use this library.

Install

Use

import snapshots from 'jest-snapshots'
import TestComponent from './TestComponent'

snapshots(TestComponent, {
  'with none': {},
  'with one': { one: 'something' },
  'with two': { one: 'something', two: 'and more' }
})

Which, without jest-snapshots, would be effectively the same as writing tests manually as follows (but about half the noise; 11 vs. 5 lines, 401 vs. 220 characters):

import React from 'react'
import { shallow } from 'enzyme'
import TestComponent from './TestComponent'

describe('TestComponent snapshots', () => {
  it('with none', () => {
    expect(shallow(<TestComponent />)).toMatchSnapshot()
  })
  it('with one', () => {
    expect(shallow(<TestComponent one="something" />)).toMatchSnapshot()
  })
  it('with two', () => {
    expect(shallow(<TestComponent one="something" two="and more" />)).toMatchSnapshot()
  })
})

Alternatively, you can pass an array of props sets, rather than provide names as keys (indexes will be used):

import snapshots from 'jest-snapshots'
import TestComponent from './TestComponent'

snapshots(TestComponent, [
  {},
  { one: 'something' },
  { one: 'something', two: 'and more' }
])

Or you can pass just a component reference, which will result in a single snapshot using no props (equivalent to passing [{}]):

snapshots(TestComponent)

To have jest-snapshots auto-generate props via react-fake-props, you must provide a file path to the component, rather than a class/function reference. There are two ways to achieve this. In either case, a .js suffix is assumed and added automatically if the path doesn't end in .js/.jsx/.ts/.tsx. You can pass an array including __dirname and it will be joined automatically.

import snapshots from 'jest-snapshots'

snapshots([__dirname, 'TestComponent'])

Or you can pass an explicit path:

import { join } from 'path'
import snapshots from 'jest-snapshots'

snapshots(join(__dirname, 'TestComponent'))

Finally, here are more examples with additional options:

import snapshots from 'jest-snapshots'
import TestComponent from './TestComponent'

snapshots({
  component: TestComponent,
  mount: true, // Use enzyme's `mount` instead of `shallow`.
  props: {
    'with one': { one: 'something' },
    'with two': { one: 'something', two: 'and more' }
  }
})

snapshots({
  component: [__dirname, 'TestComponent'],
  // Pass options to `react-fake-props`, such as to generate optional props:
  fakePropsOptions: {
    optional: true
  }
})