feat: Handle elements in non-children props in shallow render (#24)

package.json

@@ -37,7 +37,8 @@
   "dependencies": {
     "lodash.compact": "^3.0.1",
     "lodash.omit": "^4.5.0",
-    "object-values": "^1.0.0"
+    "object-values": "^1.0.0",
+    "object.entries": "^1.0.3"
   },
   "peerDependencies": {
     "enzyme": "^2.4.1"

src/shallow.js

@@ -1,8 +1,10 @@
 import compact from 'lodash.compact';
 import omit from 'lodash.omit';
+import entries from 'object.entries';
 import {propsOfNode} from 'enzyme/build/Utils';
 import {typeName} from 'enzyme/build/Debug';
 import {childrenOfNode} from 'enzyme/build/ShallowTraversal';
+import {isElement} from 'enzyme/build/react-compat';
 
 function nodeToJson(node) {
     if(!node) return node;
@@ -11,13 +13,28 @@ function nodeToJson(node) {
         return node;
     }
 
+    if (!isElement(node)) {
+        if (Array.isArray(node)) {
+            return node.map(nodeToJson);
+        }
+
+        if (typeof node === 'object') {
+            return entries(node).reduce((obj, [key, val]) => {
+                obj[key] = nodeToJson(val);
+                return obj;
+            }, {});
+        }
+
+        return node;
+    }
+
     const children = compact(childrenOfNode(node).map(n => nodeToJson(n)));
     const type = typeName(node);
     const props = omit(propsOfNode(node), 'children');
 
     return {
         type,
-        props,
+        props: nodeToJson(props),
         children: children.length ? children : null,
         $$typeof: Symbol.for('react.test.json'),
     };

test/__snapshots__/shallow.test.js.snap

@@ -52,3 +52,47 @@ exports[`test converts basic pure shallow 1`] = `
 `;
 
 exports[`test handles a component which returns null 1`] = `null`;
+
+exports[`test handles elements in prop arrays 1`] = `
+<BasicPure
+  elements={
+    Array [
+      <BasicPure>
+        <strong>
+            Hello!
+        </strong>
+    </BasicPure>,
+    ]
+  } />
+`;
+
+exports[`test handles elements in prop objects 1`] = `
+<BasicPure
+  element={
+    Object {
+      "element": <BasicPure>
+        <strong>
+            Hello!
+        </strong>
+    </BasicPure>,
+      "nestedElements": Array [
+        <BasicPure>
+          <strong>
+                Hello again!
+          </strong>
+    </BasicPure>,
+      ],
+    }
+  } />
+`;
+
+exports[`test handles elements in props 1`] = `
+<BasicPure
+  element={
+    <BasicPure>
+      <strong>
+        Hello!
+      </strong>
+    </BasicPure>
+  } />
+`;

test/shallow.test.js

@@ -6,6 +6,10 @@ import { shallowToJson } from '../src';
 import { BasicPure } from './fixtures/pure-function';
 import { BasicClass, ClassWithPure, ClassWithNull } from './fixtures/class';
 
+function WrapperComponent(props) {
+    return <BasicPure {...props} />;
+}
+
 it('converts basic pure shallow', () => {
     const shallowed = shallow(
         <BasicPure className="pure"><strong>Hello!</strong></BasicPure>
@@ -35,3 +39,32 @@ it('handles a component which returns null', () => {
     );
     expect(shallowToJson(shallowed)).toMatchSnapshot();
 });
+
+it('handles elements in props', () => {
+    const shallowed = shallow(
+        <WrapperComponent element={<BasicPure><strong>Hello!</strong></BasicPure>} />
+    );
+    expect(shallowToJson(shallowed)).toMatchSnapshot();
+});
+
+it('handles elements in prop arrays', () => {
+    const shallowed = shallow(
+        <WrapperComponent elements={[
+            <BasicPure><strong>Hello!</strong></BasicPure>,
+        ]} />
+    );
+    expect(shallowToJson(shallowed)).toMatchSnapshot();
+});
+
+it('handles elements in prop objects', () => {
+    const shallowed = shallow(
+        <WrapperComponent element={{
+            element: <BasicPure><strong>Hello!</strong></BasicPure>,
+            nestedElements: [
+                <BasicPure><strong>Hello again!</strong></BasicPure>,
+            ],
+        }} />
+    );
+
+    expect(shallowToJson(shallowed)).toMatchSnapshot();
+});