fix(mountToJson): Fixed a bug where instrumentation code shows up in …

…the snapshot output #13
adriantoine · Oct 3, 2016 · 0c68c3a · 0c68c3a
1 parent dffe929
commit 0c68c3a
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();
+});