enzyme-to-json

What is enzyme-to-json?

The enzyme-to-json package is a utility that converts Enzyme wrappers to a format compatible with Jest snapshot testing. It helps in serializing Enzyme wrappers so that they can be easily compared in Jest snapshot tests.

What are enzyme-to-json's main functionalities?

Convert Enzyme wrapper to JSON

This feature allows you to convert an Enzyme wrapper into a JSON object. This is particularly useful for snapshot testing with Jest, as it allows you to serialize the component's output and compare it to a saved snapshot.

const enzymeToJson = require('enzyme-to-json');
const { shallow } = require('enzyme');
const React = require('react');
const MyComponent = () => <div>Hello World</div>;
const wrapper = shallow(<MyComponent />);
const json = enzymeToJson(wrapper);
console.log(json);

Snapshot testing with Jest

This feature demonstrates how to use enzyme-to-json in conjunction with Jest for snapshot testing. By converting the Enzyme wrapper to JSON, you can easily create and compare snapshots to ensure your component's output remains consistent over time.

const enzymeToJson = require('enzyme-to-json');
const { shallow } = require('enzyme');
const React = require('react');
const MyComponent = () => <div>Hello World</div>;
test('MyComponent matches snapshot', () => {
  const wrapper = shallow(<MyComponent />);
  expect(enzymeToJson(wrapper)).toMatchSnapshot();
});

Other packages similar to enzyme-to-json

jest-serializer-enzyme

jest-serializer-enzyme is another package that provides a serializer for Enzyme wrappers to be used with Jest. It offers similar functionality to enzyme-to-json by converting Enzyme wrappers into a format that can be used for snapshot testing. However, jest-serializer-enzyme is specifically designed to be used as a Jest serializer, making it a more integrated solution for Jest users.

enzyme-adapter-react-16

enzyme-adapter-react-16 is an adapter for Enzyme that allows it to work with React 16. While it does not provide JSON serialization itself, it is often used in conjunction with enzyme-to-json or similar packages to enable snapshot testing for React components. It is essential for setting up Enzyme to work with specific versions of React.

README

enzyme-to-json

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

Install

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

Usage

The serializer is the recommended way to use enzyme-to-json, the installation and usage of it is very easy and allows you to write clean and simple snapshot tests.

In order to use the serializer, just add this line to your Jest configuration:

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

Example

For most projects, that is all you need to start using snapshot tests on Enzyme wrappers. The rest of this readme is only showing advanced usages of this library.

In case you are still confused, here is a minimal example project demonstrating this configuration.

Advanced usage

Serializer in unit tests

You can add the serializer for only one Jest test file by adding these lines at the beginning of your Jest unit test file:

import {createSerializer} from 'enzyme-to-json';

expect.addSnapshotSerializer(createSerializer({mode: 'deep'}));

You can also add the serializer for all tests using the setupFilesAfterEnv configuration option from Jest.

Helper

At the beginning, enzyme-to-json was just a helper because serializers weren't supported by Jest. Even though it is now recommended to use the serializer to keep your tests simple, you can still use the helper as it gives you access to the option objects.

The helper is just a function you can import from enzyme-to-json and just pass your Enzyme wrapper as the first parameter and snapshot test the returned value, you'll get the same results as if you used the serializer. Note that you don't have to disable the serializer if you had configured it for the rest of your project. Here is a usage example:

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

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

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

The main purpose of using the helper is to use the option object. The option object is just the second argument of the helper, here is an example:

toJson(wrapper, {
  noKey: false,
  mode: 'deep',
});

And here are all the possible options:

Key	Value	Description
noKey	bool	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 by settting this option to true. Only works for the mount and shallow wrappers.
mode	'deep', 'shallow'	The deep option will return a test object rendered to maximum depth while the shallow option will return a test object rendered to minimum depth. Only works for the mount wrappers. See mode documentation for examples.
map	function	You can change each nested node of your component output by providing the map option. See map documentation for examples.
ignoreDefaultProps	bool	You can exclude the default props from snapshots in shallow mode

Docs

• Helper functions
• Modes
• Map