snap-shot-jest-test

Jest compatibility with snap-shot test project

JSX / React test example in Link.test.js and to debug it use npm run debug

import React from 'react';
import Link from './Link';
import renderer from 'react-test-renderer';
import snapshot from 'snap-shot'

// removes Function values (and other non-serializable stuff)
const strip = o => JSON.parse(JSON.stringify(o))

test('Link changes the class when hovered', () => {
  // snapshot does not know how to handle JSX
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>
  );
  let tree = component.toJSON();
  snapshot(strip(tree))

  // manually trigger the callback
  tree.props.onMouseEnter();
  // re-rendering
  tree = component.toJSON();
  snapshot(strip(tree))

  // manually trigger the callback
  tree.props.onMouseLeave();
  // re-rendering
  tree = component.toJSON();
  snapshot(strip(tree))
});

Data-driven testing

Inspired by Sazerac: Data-driven Testing for JavaScript there is simple solution for testing multiple inputs against multiple outputs.

// sazerac
import { test, given, forCases } from 'sazerac'
test(isPrime, () => {
  const primes = [ given(2), given(3), given(5), given(7) ]
  forCases(primes).expect(true)
})

Same approach using snapshot requires small utility function

import snapshot from 'snap-shot'
function snap(fn, inputs) {
  const output = inputs.map(fn)
  snapshot(output)
}

it('works for primes', () => {
  snap(isPrime, [2, 3, 5, 7])
})

it('works for non-primes', () => {
  snap(isPrime, [4, 6, 8, 10])
})

The output snapshot file will have

exports['works for primes 1'] = [
  true,
  true,
  true,
  true
]
exports['works for non-primes 1'] = [
  false,
  false,
  false,
  false
]