diff --git a/package.json b/package.json
index 9cf4343..036e219 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "enzyme": "^2.9.1",
+    "enzyme-to-json": "^2.0.1",
     "jest": "^20.0.4",
     "nock": "^9.0.14",
     "react-test-renderer": "^15.6.1"
diff --git a/src/components/__tests__/A.test.js b/src/components/__tests__/A.test.js
index bee1ba7..450ae4d 100644
--- a/src/components/__tests__/A.test.js
+++ b/src/components/__tests__/A.test.js
@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 import { render, shallow, mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
 
 describe('<A />', () => {
   let makeSubject;
@@ -22,25 +23,25 @@ describe('<A />', () => {
     makeShallowSubject = () => shallow(<A {...params} />)
     makeRenderSubject = () => render(<A {...params} />);
   });
-  
+
   describe('snapshots', () => {
     // snapshot
     it('should match latest render snapshot', () => {
       const subject = makeRenderSubject();
 
-      expect(subject.html()).toMatchSnapshot();
+      expect(toJson(subject)).toMatchSnapshot();
     });
 
     it('should match latest shallow snapshot', () => {
       const subject = makeShallowSubject();
 
-      expect(subject.html()).toMatchSnapshot();
+      expect(toJson(subject)).toMatchSnapshot();
     });
 
     it('should match latest mount snapshot', () => {
       const subject = makeSubject();
 
-      expect(subject.html()).toMatchSnapshot();
+      expect(toJson(subject)).toMatchSnapshot();
     });
   });
 
@@ -54,7 +55,7 @@ describe('<A />', () => {
   // event simulate with shallow
   it('should call foo when .btn-foo clicked', () => {
     const subject = makeShallowSubject();
-    
+
     subject.find('.btn-bar').simulate('click');
     expect(params.bar).toHaveBeenCalled();
   });
@@ -62,7 +63,7 @@ describe('<A />', () => {
   // event simulate with mount
   it('should call foo when .btn-foo clicked', () => {
     const subject = makeSubject();
-    
+
     subject.instance().foo = jest.fn();
     subject.update();
     subject.find('.btn-foo').simulate('click');
diff --git a/src/components/__tests__/B.test.js b/src/components/__tests__/B.test.js
index 1d2f763..71db7ed 100644
--- a/src/components/__tests__/B.test.js
+++ b/src/components/__tests__/B.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
 
 describe('<B />', () => {
   let B;
@@ -16,12 +17,12 @@ describe('<B />', () => {
   it('should match shallow snapshot', () => {
     const subject = makeShallowSubject();
 
-    expect(subject.html()).toMatchSnapshot();
+    expect(toJson(subject)).toMatchSnapshot();
   });
 
   it('should match snapshot', () => {
     const subject = makeSubject();
 
-    expect(subject.html()).toMatchSnapshot();
+    expect(toJson(subject)).toMatchSnapshot();
   });
-});
\ No newline at end of file
+});
diff --git a/src/components/__tests__/C.test.js b/src/components/__tests__/C.test.js
index 5edbbeb..d2a7f39 100644
--- a/src/components/__tests__/C.test.js
+++ b/src/components/__tests__/C.test.js
@@ -16,4 +16,4 @@ describe('<C />', () => {
 
     expect(subject).toMatchSnapshot();
   });
-});
\ No newline at end of file
+});
diff --git a/src/components/__tests__/__snapshots__/A.test.js.snap b/src/components/__tests__/__snapshots__/A.test.js.snap
index 43e5d1b..4791864 100644
--- a/src/components/__tests__/__snapshots__/A.test.js.snap
+++ b/src/components/__tests__/__snapshots__/A.test.js.snap
@@ -1,7 +1,135 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<A /> snapshots should match latest mount snapshot 1`] = `"<div><h1 style=\\"display: none;\\">title</h1><button class=\\"btn-foo\\">click me</button><button class=\\"btn-bar\\">click me</button><nav><a href=\\"#\\"><!-- react-text: 7 -->I am link <!-- /react-text --><!-- react-text: 8 -->0<!-- /react-text --><!-- react-text: 9 -->.<!-- /react-text --></a><a href=\\"#\\"><!-- react-text: 11 -->I am link <!-- /react-text --><!-- react-text: 12 -->1<!-- /react-text --><!-- react-text: 13 -->.<!-- /react-text --></a><a href=\\"#\\"><!-- react-text: 15 -->I am link <!-- /react-text --><!-- react-text: 16 -->2<!-- /react-text --><!-- react-text: 17 -->.<!-- /react-text --></a></nav></div>"`;
+exports[`<A /> snapshots should match latest mount snapshot 1`] = `
+<A
+  bar={[Function]}
+>
+  <div>
+    <h1
+      style={
+        Object {
+          "display": "none",
+        }
+      }
+    >
+      title
+    </h1>
+    <button
+      className="btn-foo"
+      onClick={[Function]}
+    >
+      click me
+    </button>
+    <button
+      className="btn-bar"
+      onClick={[Function]}
+    >
+      click me
+    </button>
+    <B>
+      <nav>
+        <C
+          id={0}
+          key="0"
+        >
+          <a
+            href="#"
+          >
+            I am link 
+            0
+            .
+          </a>
+        </C>
+        <C
+          id={1}
+          key="1"
+        >
+          <a
+            href="#"
+          >
+            I am link 
+            1
+            .
+          </a>
+        </C>
+        <C
+          id={2}
+          key="2"
+        >
+          <a
+            href="#"
+          >
+            I am link 
+            2
+            .
+          </a>
+        </C>
+      </nav>
+    </B>
+  </div>
+</A>
+`;
 
-exports[`<A /> snapshots should match latest render snapshot 1`] = `"<div><h1 style=\\"display:none;\\">title</h1><button class=\\"btn-foo\\">click me</button><button class=\\"btn-bar\\">click me</button><nav><a href=\\"#\\">I am link 0.</a><a href=\\"#\\">I am link 1.</a><a href=\\"#\\">I am link 2.</a></nav></div>"`;
+exports[`<A /> snapshots should match latest render snapshot 1`] = `
+<div>
+  <h1
+    style="display:none;"
+  >
+    title
+  </h1>
+  <button
+    class="btn-foo"
+  >
+    click me
+  </button>
+  <button
+    class="btn-bar"
+  >
+    click me
+  </button>
+  <nav>
+    <a
+      href="#"
+    >
+      I am link 0.
+    </a>
+    <a
+      href="#"
+    >
+      I am link 1.
+    </a>
+    <a
+      href="#"
+    >
+      I am link 2.
+    </a>
+  </nav>
+</div>
+`;
 
-exports[`<A /> snapshots should match latest shallow snapshot 1`] = `"<div><h1 style=\\"display:none;\\">title</h1><button class=\\"btn-foo\\">click me</button><button class=\\"btn-bar\\">click me</button><nav><a href=\\"#\\">I am link 0.</a><a href=\\"#\\">I am link 1.</a><a href=\\"#\\">I am link 2.</a></nav></div>"`;
+exports[`<A /> snapshots should match latest shallow snapshot 1`] = `
+<div>
+  <h1
+    style={
+      Object {
+        "display": "none",
+      }
+    }
+  >
+    title
+  </h1>
+  <button
+    className="btn-foo"
+    onClick={[Function]}
+  >
+    click me
+  </button>
+  <button
+    className="btn-bar"
+    onClick={[Function]}
+  >
+    click me
+  </button>
+  <B />
+</div>
+`;
diff --git a/src/components/__tests__/__snapshots__/B.test.js.snap b/src/components/__tests__/__snapshots__/B.test.js.snap
index 91443fb..186f896 100644
--- a/src/components/__tests__/__snapshots__/B.test.js.snap
+++ b/src/components/__tests__/__snapshots__/B.test.js.snap
@@ -1,5 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<B /> should match shallow snapshot 1`] = `"<nav><a href=\\"#\\">I am link 0.</a><a href=\\"#\\">I am link 1.</a><a href=\\"#\\">I am link 2.</a></nav>"`;
+exports[`<B /> should match shallow snapshot 1`] = `
+<nav>
+  <C
+    id={0}
+    key="0"
+  />
+  <C
+    id={1}
+    key="1"
+  />
+  <C
+    id={2}
+    key="2"
+  />
+</nav>
+`;
 
-exports[`<B /> should match snapshot 1`] = `"<nav><a href=\\"#\\"><!-- react-text: 3 -->I am link <!-- /react-text --><!-- react-text: 4 -->0<!-- /react-text --><!-- react-text: 5 -->.<!-- /react-text --></a><a href=\\"#\\"><!-- react-text: 7 -->I am link <!-- /react-text --><!-- react-text: 8 -->1<!-- /react-text --><!-- react-text: 9 -->.<!-- /react-text --></a><a href=\\"#\\"><!-- react-text: 11 -->I am link <!-- /react-text --><!-- react-text: 12 -->2<!-- /react-text --><!-- react-text: 13 -->.<!-- /react-text --></a></nav>"`;
+exports[`<B /> should match snapshot 1`] = `
+<B>
+  <nav>
+    <C
+      id={0}
+      key="0"
+    >
+      <a
+        href="#"
+      >
+        I am link 
+        0
+        .
+      </a>
+    </C>
+    <C
+      id={1}
+      key="1"
+    >
+      <a
+        href="#"
+      >
+        I am link 
+        1
+        .
+      </a>
+    </C>
+    <C
+      id={2}
+      key="2"
+    >
+      <a
+        href="#"
+      >
+        I am link 
+        2
+        .
+      </a>
+    </C>
+  </nav>
+</B>
+`;
diff --git a/yarn.lock b/yarn.lock
index ccf9ea7..999b32d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1261,6 +1261,18 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+enzyme-to-json@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-2.0.1.tgz#e8b223040a7cc603bc678a4698c1a83c8c649932"
+  dependencies:
+    lodash.filter "^4.6.0"
+    lodash.isnil "^4.0.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.omitby "^4.6.0"
+    lodash.range "^3.2.0"
+    object-values "^1.0.0"
+    object.entries "^1.0.4"
+
 enzyme@^2.9.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-2.9.1.tgz#07d5ce691241240fb817bf2c4b18d6e530240df6"
@@ -2244,7 +2256,7 @@ lodash.defaults@^4.0.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
 
-lodash.filter@^4.4.0:
+lodash.filter@^4.4.0, lodash.filter@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace"
 
@@ -2256,6 +2268,14 @@ lodash.foreach@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
 
+lodash.isnil@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/lodash.isnil/-/lodash.isnil-4.0.0.tgz#49e28cd559013458c814c5479d3c663a21bfaa6c"
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+
 lodash.map@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
@@ -2264,10 +2284,18 @@ lodash.merge@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
 
+lodash.omitby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.omitby/-/lodash.omitby-4.6.0.tgz#5c15ff4754ad555016b53c041311e8f079204791"
+
 lodash.pick@^4.2.1:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
 
+lodash.range@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.range/-/lodash.range-3.2.0.tgz#f461e588f66683f7eadeade513e38a69a565a15d"
+
 lodash.reduce@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
@@ -2477,6 +2505,10 @@ object-keys@^1.0.10, object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
+object-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/object-values/-/object-values-1.0.0.tgz#72af839630119e5b98c3b02bb8c27e3237158105"
+
 object.assign@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.0.4.tgz#b1c9cc044ef1b9fe63606fc141abbb32e14730cc"