From 0c68c3a2a6ecd3da9827aef7db3c3db3ad97f102 Mon Sep 17 00:00:00 2001
From: Adrien Antoine <adriantoine@gmail.com>
Date: Mon, 3 Oct 2016 14:08:59 +0100
Subject: [PATCH] fix(mountToJson): Fixed a bug where instrumentation code
 shows up in the snapshot output

#13
---
 package.json                          |  3 +-
 src/index.js                          |  3 +-
 test/__snapshots__/mount.test.js.snap | 55 +++++++++++++++++++++++++++
 test/fixtures/class.js                | 22 +++++++++++
 test/mount.test.js                    | 18 ++++++++-
 5 files changed, 98 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index e15fa4b..33bce3c 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
     "lodash.compact": "^3.0.1",
     "lodash.get": "^4.4.2",
     "lodash.omit": "^4.5.0",
-    "lodash.pickby": "^4.6.0"
+    "lodash.pickby": "^4.6.0",
+    "react-display-name": "^0.2.0"
   },
   "peerDependencies": {
     "enzyme": "^2.4.1"
diff --git a/src/index.js b/src/index.js
index c1c4428..2073724 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ import omit from 'lodash.omit';
 import pickBy from 'lodash.pickby';
 import compact from 'lodash.compact';
 import get from 'lodash.get';
+import getDisplayName from 'react-display-name';
 
 export function shallowToJson(wrapper) {
     const type = wrapper.type();
@@ -33,7 +34,7 @@ export function shallowToJson(wrapper) {
 
     const jsonChildren = json.children;
     json.children = [{
-        type: element.type,
+        type: getDisplayName(element.type),
         props: omit(element.props, 'children'),
         children: jsonChildren,
         $$typeof: Symbol.for('react.test.json'),
diff --git a/test/__snapshots__/mount.test.js.snap b/test/__snapshots__/mount.test.js.snap
index cf0f3c7..e1fcf8d 100644
--- a/test/__snapshots__/mount.test.js.snap
+++ b/test/__snapshots__/mount.test.js.snap
@@ -1,3 +1,36 @@
+exports[`test converts a class mount with a class component in it as a direct child 1`] = `
+<ClassWithDirectComponent
+  className="class">
+  <ClassWithPure
+    className="nested-pure">
+    <BasicPure
+      className="nested-pure">
+      <div
+        className="basic-pure nested-pure"
+        onClick={[Function]}>
+        <div
+          className="group"
+          id="group-id">
+          <span>
+            <span>
+              <span>
+                <strong />
+              </span>
+              <span
+                className="empty" />
+            </span>
+            <span
+              className="empty" />
+          </span>
+          <span
+            className="empty" />
+        </div>
+      </div>
+    </BasicPure>
+  </ClassWithPure>
+</ClassWithDirectComponent>
+`;
+
 exports[`test converts a class mount with a pure function in it 1`] = `
 <ClassWithPure
   className="class">
@@ -28,6 +61,28 @@ exports[`test converts a class mount with a pure function in it 1`] = `
 </ClassWithPure>
 `;
 
+exports[`test converts a class mount with a pure function in it as a direct child 1`] = `
+<ClassWithDirectPure
+  className="class">
+  <BasicPure
+    className="nested-pure">
+    <div
+      className="group"
+      id="group-id">
+      <span>
+        <span>
+          <strong />
+        </span>
+        <span
+          className="empty" />
+      </span>
+      <span
+        className="empty" />
+    </div>
+  </BasicPure>
+</ClassWithDirectPure>
+`;
+
 exports[`test converts basic class mount 1`] = `
 <BasicClass
   className="class">
diff --git a/test/fixtures/class.js b/test/fixtures/class.js
index 5f88185..65e93de 100644
--- a/test/fixtures/class.js
+++ b/test/fixtures/class.js
@@ -26,3 +26,25 @@ export class ClassWithPure extends Component {
         );
     }
 }
+
+export class ClassWithDirectPure extends Component {
+    render() {
+        return (
+            <BasicPure className="nested-pure">
+                <span>{this.props.children}</span>
+                <span className="empty"></span>
+            </BasicPure>
+        );
+    }
+}
+
+export class ClassWithDirectComponent extends Component {
+    render() {
+        return (
+            <ClassWithPure className="nested-pure">
+                <span>{this.props.children}</span>
+                <span className="empty"></span>
+            </ClassWithPure>
+        );
+    }
+}
diff --git a/test/mount.test.js b/test/mount.test.js
index a3c9976..2387484 100644
--- a/test/mount.test.js
+++ b/test/mount.test.js
@@ -4,7 +4,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { mountToJson } from '../src';
 import { BasicPure } from './fixtures/pure-function';
-import { BasicClass, ClassWithPure } from './fixtures/class';
+import { BasicClass, ClassWithPure, ClassWithDirectPure, ClassWithDirectComponent } from './fixtures/class';
 
 it('converts basic pure mount', () => {
     const mounted = mount(
@@ -29,3 +29,19 @@ it('converts a class mount with a pure function in it', () => {
 
     expect(mountToJson(mounted)).toMatchSnapshot();
 });
+
+it('converts a class mount with a pure function in it as a direct child', () => {
+    const mounted = mount(
+        <ClassWithDirectPure className="class"><strong>Hello!</strong></ClassWithDirectPure>
+    );
+
+    expect(mountToJson(mounted)).toMatchSnapshot();
+});
+
+it('converts a class mount with a class component in it as a direct child', () => {
+    const mounted = mount(
+        <ClassWithDirectComponent className="class"><strong>Hello!</strong></ClassWithDirectComponent>
+    );
+
+    expect(mountToJson(mounted)).toMatchSnapshot();
+});