How to use enzyme-to-json - 10 common examples

it('should render with isRequired props', () => {
        const saving = shallow(
             {
                // eslint-disable-next-line no-console
                console.log("Saving...");
            }}/>);
        expect(shallowToJson(saving)).toMatchSnapshot();
    });
});

import * as emotion from "emotion";
import { createSerializer } from "jest-emotion";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { createSerializer as enzymeSerializer } from "enzyme-to-json";

// @ts-ignore
expect.addSnapshotSerializer(enzymeSerializer({ mode: "deep" }));

Enzyme.configure({ adapter: new Adapter() });

expect.addSnapshotSerializer(createSerializer(emotion));

do {
      previousHOC = HOC;
      HOC = previousHOC.replace(/\([^()]*\)/g, '');
    } while (previousHOC !== HOC);

    innerName = innerName.replace(RegExp(`^${HOC}\\(|\\)$`, 'g'), '');
  }

  return innerName;
}

expect.addSnapshotSerializer(require('./mockDataSerializer'));
expect.addSnapshotSerializer(require('./withStylesSerializer'));
expect.addSnapshotSerializer(
  createSerializer({
    mode: 'shallow',
    map(element) {
      const props = { ...element.props };

      // Strip default props
      if (element.node.type && element.node.type.defaultProps) {
        Object.entries(element.node.type.defaultProps).forEach(([key, value]) => {
          if (key in props && props[key] === value) {
            delete props[key];
          }
        });
      }

      return {
        ...element,
        props,

const { configure } = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
const { ElectronFiddleMock } = require('./mocks/electron-fiddle');
const { createSerializer } = require('enzyme-to-json');

configure({ adapter: new Adapter() });
expect.addSnapshotSerializer(createSerializer({mode: 'deep'}));

global.confirm = jest.fn();
global.fetch = require('jest-fetch-mock');

jest.spyOn(global.console, 'log').mockImplementation(() => jest.fn());
jest.spyOn(global.console, 'warn').mockImplementation(() => jest.fn());
jest.mock('electron', () => require('./mocks/electron'));
jest.mock('fs-extra');
jest.mock('electron-download');

delete window.localStorage;
// We'll do this twice.
window.localStorage = {};
window.localStorage.setItem = jest.fn();
window.localStorage.getItem = jest.fn();
window.localStorage.removeItem = jest.fn();

it('should render with custom views', () => {
    initReactDevise({
      ...auth,
      routes: {
        login: {
          path: '/foo',
          component: MyLogin
        }
      }
    });
    const component = shallow();
    expect(component.find(Route)).toHaveLength(6);
    const tree = shallowToJson(component);
    expect(tree.children.some(n => n.props.path === '/users/foo')).toBeTruthy();

    // TODO: This does not test that custom view component is being used.
    // expect(component.find('div.my-login')).toHaveLength(1);
  });
});

import React from "react";
import Enzyme, { shallow, render, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { createSerializer } from "enzyme-to-json";
import sinon from "sinon";

// Set the default serializer for Jest to be the from enzyme-to-json
// This produces an easier to read (for humans) serialized format.
expect.addSnapshotSerializer(createSerializer({ mode: "deep" }));

// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });

// Make Enzyme functions available in all test files without importing
global.React = React;
global.shallow = shallow;
global.render = render;
global.mount = mount;
global.sinon = sinon;

// Fail tests on any warning
console.error = message => {
  throw new Error(message);
};

indent: '  ',
      openbrace: 'end-of-line',
      autosemicolon: false,
    }

    let renderer = rootRenderer
    let wrapperToSnapshot = wrapper

    if (includeStyles) {
      // use a new renderer to capture the styles just by rendering this enzyme wrapper
      renderer = createRenderer()
      wrapperToSnapshot = felaDive(wrapper, renderer)
    }

    const result = {
      component: toJson(wrapperToSnapshot),
    }

    if (includeStyles) {
      result.styles = `\n${cssbeautify(renderToString(renderer), options)}\n`
    }

    return result
  }

import * as React from 'react';
import * as Enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import {createSerializer} from 'enzyme-to-json';
import * as sinon from 'sinon';
import {mount, render, shallow} from 'enzyme';

// Set the default serializer for Jest to be the from enzyme-to-json
// This produces an easier to read (for humans) serialized format.
// @ts-ignore
expect.addSnapshotSerializer(createSerializer({ mode: 'deep' }));

// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });

// Define globals to cut down on imports in test files
// @ts-ignore
global.React = React;
// @ts-ignore
global.shallow = shallow;
// @ts-ignore
global.render = render;
// @ts-ignore
global.mount = mount;
// @ts-ignore
global.sinon = sinon;

import { configure } from "enzyme"
import Adapter from "enzyme-adapter-react-16"
import { createSerializer } from "enzyme-to-json"

configure({ adapter: new Adapter() })

expect.addSnapshotSerializer(createSerializer({ mode: "deep" }))

jest.mock("draft-js", () => {
  const packages = {
    "0.10": "draft-js",
    "0.11": "draft-js-11",
  }
  const version = process.env.DRAFTJS_VERSION || "0.10"

  // Require the original module.
  const originalModule = jest.requireActual(packages[version])

  return {
    __esModule: true,
    ...originalModule,
  }
})

import contentLoaderSerializer from '@shared/tests/serializer/content-loader-serializer.js';
import jssSerializer from '@shared/tests/serializer/jss-snapshot-serializer';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { createSerializer } from 'enzyme-to-json';
import ResizeObserver from 'resize-observer-polyfill';

process.env.NODE_ENV = 'test';
process.env.BABEL_ENV = 'test';

// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });

expect.addSnapshotSerializer(
  // @ts-ignore
  createSerializer({
    map: (el) => {
      // @ts-ignore
      el.node && el.node.attribs && el.node.attribs.theme && delete el.node.attribs.theme;
      // @ts-ignore
      el.node && el.node.attribs && el.node.attribs.classes && delete el.node.attribs.classes;
      return el;
    }
  })
);
expect.addSnapshotSerializer(jssSerializer);
expect.addSnapshotSerializer(contentLoaderSerializer);

export const setupMatchMedia = () => {
  // @ts-ignore
  window.matchMedia = () => {
    return {