etj

enzyme-to-json

Snapshot test your Enzyme wrappers

Showing:

Popularity

Downloads/wk

1.3M

GitHub Stars

961

Maintenance

Last Commit

9mos ago

Contributors

40

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Reviews

Average Rating

4.5/52
Read All Reviews
rohittp0
davidhu2000

Top Feedback

2Easy to Use
2Performant
1Great Documentation

Readme

enzyme-to-json

Build Status codecov npm Version License Downloads

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:

KeyValueDescription
noKeyboolSince 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.
mapfunctionYou can change each nested node of your component output by providing the map option. See map documentation for examples.
ignoreDefaultPropsboolYou can exclude the default props from snapshots in shallow mode

Docs

Rate & Review

Great Documentation1
Easy to Use2
Performant2
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
RohitPayyanur, Kannur, Kerala, India35 Ratings35 Reviews
I am a second year computer science student.
5 months ago
Great Documentation
Easy to Use
Performant

One of my teachers once said, "It is not about writing highly performant or optimized code, it is about writing code that is humanly readable". The snapshot you normally get from the enzyme looks like something that is halfway between assembly and byte code. enzyme to JSON works its magic on this and turns it into a nice little JSON-like file that you can easily inspect. I know this is not the intended use of this package, but if it is a bug that users can take advantage of then it is a feature right. The ability of this plugin to effortlessly plug into the enzyme pipeline is a big game changer for me. It does its work and sits silently ( since it doesn't have any external configs you probably won't notice it exists until you open the package.json ). Over all it is one of the best dev dependency you would come across


0
David HuSan Francisco, CA20 Ratings21 Reviews
Software Developer with experience in languages such as Ruby, JavaScript, and SQL, and frameworks such as Rails, React, React Native, and Electron
January 5, 2021
Easy to Use
Performant

A necessary package to have if you are using enzyme for your tests. This will make the outputted snapshot much more friendly to read.


0

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial