Add support for Lazy, Memo and Suspense, bump deps (#120)

package.json

@@ -54,8 +54,8 @@
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.6.0",
     "codecov": "^2.3.0",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "^1.0.1",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.7.0",
     "eslint": "^4.8.0",
     "eslint-config-prettier": "^2.6.0",
     "eslint-config-standard": "^10.2.1",
@@ -68,17 +68,21 @@
     "jest": "~21.2.1",
     "prettier": "^1.7.4",
     "prettier-check": "^2.0.0",
-    "prop-types": "^15.6.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-test-renderer": "^16.0.0"
+    "prop-types": "^15.6.2",
+    "raf": "^3.4.1",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-test-renderer": "^16.6.0"
   },
   "jest": {
     "testPathIgnorePatterns": [
       "<rootDir>/node_modules/"
     ],
     "coveragePathIgnorePatterns": [
       "<rootDir>/tests"
+    ],
+    "setupFiles": [
+      "raf/polyfill"
     ]
   }
 }

src/shallow.js

@@ -39,10 +39,6 @@ function internalNodeToJson(node, options) {
     return '';
   }
 
-  if (Array.isArray(node)) {
-    return node.map(n => internalNodeToJson(n, options));
-  }
-
   const json = applyMap(
     {
       node,

src/utils.js

@@ -37,8 +37,17 @@ export const applyMap = (json, options) => {
 
 export const extractTypeName = node => {
   const name = typeName(node);
-  if (name === Symbol.for('react.fragment')) {
-    return 'React.Fragment';
+
+  if (name.$$typeof === Symbol.for('react.lazy')) {
+    return 'React.Lazy';
+  }
+
+  if (name.$$typeof === Symbol.for('react.memo')) {
+    return 'React.Memo';
+  }
+
+  if (name === Symbol.for('react.suspense')) {
+    return 'React.Suspense';
   }
 
   return name;

tests/__snapshots__/shallow.test.js.snap

@@ -96,15 +96,23 @@ Array [
   <div
     className="test"
     key="test"
-  />,
+  >
+    Test
+  </div>,
   <div
     className="test2"
     key="test2"
-  />,
+  >
+    Test 2
+  </div>,
   <div
     className="child"
     key="child"
-  />,
+  >
+    <strong>
+      Hello!
+    </strong>
+  </div>,
 ]
 `;
 
@@ -113,15 +121,23 @@ Array [
   <div
     className="test"
     key="test"
-  />,
+  >
+    Test
+  </div>,
   <div
     className="test2"
     key="test2"
-  />,
+  >
+    Test 2
+  </div>,
   <div
     className="child"
     key="child"
-  />,
+  >
+    <strong>
+      Hello!
+    </strong>
+  </div>,
 ]
 `;
 
@@ -216,22 +232,45 @@ exports[`outputs the snapshot even with inline JSX conditions being falsy 1`] =
 </div>
 `;
 
-exports[`renders a component that has a child fragment 1`] = `
+exports[`renders a component that has a Memo component 1`] = `
+<div>
+  <span />
+  <React.Memo />
+</div>
+`;
+
+exports[`renders a component that has a Suspense as root with Lazy child 1`] = `
+<React.Suspense>
+  <span />
+  <div />
+  <React.Lazy />
+</React.Suspense>
+`;
+
+exports[`renders a component that has a Suspense with Lazy as child 1`] = `
 <div>
-  <React.Fragment>
-    <span />
+  <React.Suspense>
+    <React.Lazy />
     <div />
     <button />
-  </React.Fragment>
+  </React.Suspense>
+</div>
+`;
+
+exports[`renders a component that has a child fragment 1`] = `
+<div>
+  <span />
+  <div />
+  <button />
 </div>
 `;
 
 exports[`renders a component that has a fragment root 1`] = `
-<React.Fragment>
+<Fragment>
   <span />
   <div />
   <button />
-</React.Fragment>
+</Fragment>
 `;
 
 exports[`renders multiple elements as a result of find 1`] = `

tests/fixtures/pure-function.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+const Lazy = React.lazy(() => Promise.resolve(<div>lazy div</div>));
+const Memo = React.memo(() => <div>memoized div</div>);
+
 export function BasicPure(props) {
   return (
     <div
@@ -72,3 +75,28 @@ export const FragmentAsRoot = () => (
     <button />
   </React.Fragment>
 );
+
+export const SuspenseAsChild = () => (
+  <div>
+    <React.Suspense>
+      <Lazy />
+      <div />
+      <button />
+    </React.Suspense>
+  </div>
+);
+
+export const SuspenseAsRoot = () => (
+  <React.Suspense>
+    <span />
+    <div />
+    <Lazy />
+  </React.Suspense>
+);
+
+export const ComponentWithMemo = () => (
+  <div>
+    <span />
+    <Memo />
+  </div>
+);

tests/shallow.test.js

@@ -14,6 +14,9 @@ import {
   FalsyChildren,
   FragmentAsChild,
   FragmentAsRoot,
+  SuspenseAsChild,
+  SuspenseAsRoot,
+  ComponentWithMemo,
 } from './fixtures/pure-function';
 import {
   BasicClass,
@@ -266,3 +269,21 @@ it('renders a component that has a fragment root', () => {
 
   expect(shallowToJson(wrapper)).toMatchSnapshot();
 });
+
+it('renders a component that has a Suspense with Lazy as child', () => {
+  const wrapper = shallow(<SuspenseAsChild />);
+
+  expect(shallowToJson(wrapper)).toMatchSnapshot();
+});
+
+it('renders a component that has a Suspense as root with Lazy child', () => {
+  const wrapper = shallow(<SuspenseAsRoot />);
+
+  expect(shallowToJson(wrapper)).toMatchSnapshot();
+});
+
+it('renders a component that has a Memo component', () => {
+  const wrapper = shallow(<ComponentWithMemo />);
+
+  expect(shallowToJson(wrapper)).toMatchSnapshot();
+});