Package Exports

enzyme-to-json
enzyme-to-json/build/utils
enzyme-to-json/serializer
enzyme-to-json/serializer.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (enzyme-to-json) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

enzyme-to-json

Convert Enzyme wrappers to a format compatible with Jest snapshot testing.

Install

$ npm install --save-dev enzyme-to-json

Usage

Helper

import React, { Component } from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

class MyComponent extends Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
    this.state = { count: 1 };
  }

  handleClick() {
    this.setState(({ count }) => ({ count: count + 1 }));
  }

  render() {
    return (
      <div className={this.props.className} onClick={this.handleClick}>
        <span className="count">{this.state.count}</span>
        {this.props.children}
      </div>
    );
  }
}

it('renders correctly', () => {
  const wrapper = shallow(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  expect(toJson(wrapper)).toMatchSnapshot();
});

// generates:

exports[`renders correctly 1`] = `
<div
  className="my-component"
  onClick={[Function]}
>
  <span
    className="count"
  >
    1
  </span>
  <strong>
    Hello World!
  </strong>
</div>
`;

It becomes especially handy as you can use all Enzyme features like find or setState:

it('renders span after setState', () => {
  const wrapper = shallow(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  wrapper.setState({ count: 42 });
  expect(toJson(wrapper.find('span'))).toMatchSnapshot();
});

// generates:

exports[`renders span after setState 1`] = `
<span
  className="count"
>
  42
</span>
`;

It could be useful if you want more focused tests.

This library also supports mount and render Enzyme wrappers:

it('mounts my component', () => {
  const wrapper = mount(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  expect(toJson(wrapper)).toMatchSnapshot();
});

it('renders my component', () => {
  const wrapper = render(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  expect(toJson(wrapper)).toMatchSnapshot();
});

You can still use the shallowToJson, mountToJson and renderToJson wrappers from the earlier versions, importing them like this:

import {shallowToJson, mountToJson, renderToJson} from 'enzyme-to-json';

Options

`noKey`

Since v2.0.0, the key prop is included in the snapshot, you can turn it off if you don't want your key to be in your snapshot:

toJson(wrapper, {noKey: true});
shallowToJson(wrapper, {noKey: true});
mountToJson(wrapper, {noKey: true});

Serializer

If you are using Jest v17.0.0 or higher, you can also use a Jest serializer.

Add this to your Jest configuration:

"snapshotSerializers": ["<rootDir>/node_modules/enzyme-to-json/serializer"]

If you use Jest v18.0.0 or higher, you can use a shorthand:

"snapshotSerializers": ["enzyme-to-json/serializer"]

If you use Jest v19.0.0 or higher, you can add a snapshot serializer in individual test files instead of modifying Jest configuration:

to make the dependency explicit instead of implicit
to avoid limits to configuration that might cause you to eject from create-react-app

import serializer from 'enzyme-to-json/serializer';

expect.addSnapshotSerializer(serializer);

Then you can use all of the above without having to include or use the toJson function! For example:

it('mounts my component', () => {
  const wrapper = shallow(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  expect(wrapper).toMatchSnapshot();
});

it('mounts my component', () => {
  const wrapper = mount(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  expect(wrapper).toMatchSnapshot();
});

it('renders my component', () => {
  const wrapper = render(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>
  );

  expect(wrapper).toMatchSnapshot();
});

This is inspired by jest-serializer-enzyme, thanks to @rogeliog for bringing up the idea.

Examples

Focused tests with `find` method

One thing I really like about this library is the ability to use find and Enzyme selectors to have focused tests.

For example, with react-test-renderer (used in Jest documentation), you would test a component like that:

import React from 'react';
import renderer from 'react-test-renderer';

const MyComponent = props => (
    <div className={`my-component ${props.className}`}>
        <h3>Component Heading</h3>
        <span>{props.children}</span>
    </div>
);

it('renders a `strong` correctly', () => {
    const wrapper = renderer.create(
        <MyComponent className="strong-class">
            <strong>Hello World!</strong>
        </MyComponent>
    );

    expect(wrapper).toMatchSnapshot();
});

it('renders a `span` correctly', () => {
    const wrapper = renderer.create(
        <MyComponent className="span-class">
            <span>Hello World!</span>
        </MyComponent>
    );

    expect(wrapper).toMatchSnapshot();
});

and so on, handling all test cases. The problem, is that when you decide to change Component Heading to Component Title, you will get a failing snapshot test for each test with a long output like that:

● renders a `strong` correctly

Received value does not match the stored snapshot 1.

- Snapshot
+ Received

  <div
    className="my-component strong-class"
  >
    <h3>
-     Component Heading
+     Component Title
    </h3>
    <span>
      <strong>
        Hello World!
      </strong>
    </span>
  </div>

  at Object.<anonymous> (test/focused.test.js:22:21)
  at process._tickCallback (internal/process/next_tick.js:103:7)

● renders a `span` correctly

Received value does not match the stored snapshot 1.

- Snapshot
+ Received

  <div
    className="my-component span-class"
  >
    <h3>
-     Component Heading
+     Component Title
    </h3>
    <span>
      <span>
        Hello World!
      </span>
    </span>
  </div>

  at Object.<anonymous> (test/focused.test.js:32:21)
  at process._tickCallback (internal/process/next_tick.js:103:7)

and so on, you may have 10 or more snapshot tests for the same component to handle different test cases.

When using Enzyme find helper, you can write your tests focusing on a specific part of the output, like that:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

const MyComponent = props => (
    <div className={`my-component ${props.className}`}>
        <h3>Component Heading</h3>
        <span>{props.children}</span>
    </div>
);

it('renders the right title', () => {
    const wrapper = shallow(
        <MyComponent className="strong-class"/>
    );

    expect(toJson(wrapper.find('h3'))).toMatchSnapshot();
});

it('renders a `strong` correctly', () => {
    const wrapper = shallow(
        <MyComponent className="strong-class">
            <strong>Hello World!</strong>
        </MyComponent>
    );

    expect(toJson(wrapper.find('span').first())).toMatchSnapshot();
});

it('renders a `span` correctly', () => {
    const wrapper = shallow(
        <MyComponent className="span-class">
            <span>Hello World!</span>
        </MyComponent>
    );

    expect(toJson(wrapper.find('span').first())).toMatchSnapshot();
});

Testing that the component renders a span and a strong is in a different test from testing that the title is correct and they will only fail if the component doesn't render span or strong correctly. When the title changes, only the first snapshot test will fail:

● renders the right title

Received value does not match the stored snapshot 1.

- Snapshot
+ Received

  <h3>
-   Component Heading
+   Component Title
  </h3>

  at Object.<anonymous> (test/focused.test.js:19:93)
  at process._tickCallback (internal/process/next_tick.js:103:7)

Focused tests for `mount` wrapper

Because an Enzyme mount wrapper has a hybrid render tree of React components and DOM elements, mountToJson, toJson, and the serializer return both types of nodes. However, you can focus on whichever nodes are more relevant as the expected result of a test.

`mountToDeepJson`

Given an enzyme mount wrapper, especially from selector traversal, return a test object rendered to maximum depth. It contains only DOM nodes, no React components.

import React from 'react';
import { mount } from 'enzyme';
import { mountToDeepJson } from 'enzyme-to-json';

test('table head has field labels and button element to add a row', () => {
  const addRow = () => {}; // a realistic example would interact with DOM :)
  const fields = [ … ];
  const records = [ … ];
  const wrapper = mount(<Table addRow={addRow} fields={fields} records={records} />);

  expect(mountToDeepJson(wrapper.find('thead'))).toMatchSnapshot();
});

`mountToShallowJson`

Given an enzyme mount wrapper, especially from selector traversal, return a test object rendered to minimum depth. It might contain DOM nodes, but any children which are React components are leaves of the tree. For some tests, it might combine the benefits of the mount and shallow wrappers.

import React from 'react';
import { mount } from 'enzyme';
import { mountToShallowJson } from 'enzyme-to-json';

test('table head has field labels and Button component to add a row', () => {
  const addRow = () => {}; // a realistic example would interact with DOM :)
  const fields = [ … ];
  const records = [ … ];
  const wrapper = mount(<Table addRow={addRow} fields={fields} records={records} />);

  expect(mountToShallowJson(wrapper.find('thead'))).toMatchSnapshot();
});

Contributing

See CONTRIBUTING.md.

enzyme-to-json

Package Exports

Readme

enzyme-to-json

Install

Usage

Helper

Options

noKey

Serializer

Examples

Focused tests with find method

Focused tests for mount wrapper

mountToDeepJson

mountToShallowJson

Contributing

`noKey`

Focused tests with `find` method

Focused tests for `mount` wrapper

`mountToDeepJson`

`mountToShallowJson`