Add jest-html

.jestrc

@@ -1,3 +1,6 @@
 {
-  "snapshotSerializers": ["./node_modules/jest-serializer-enzyme"]
+  "snapshotSerializers": [
+  	"./node_modules/jest-serializer-enzyme",
+  	"./node_modules/jest-html"
+  ]
 }

README.md

@@ -29,3 +29,9 @@ If you want to update snapshots, hit it with -u option.
 ```$xslt
 $ yarn test -- -u
 ```
+
+To check snapshot as more like HTML, you can use jest-html
+
+```$xslt
+$ yarn jest-html
+```

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --progress --inline --hot",
-    "test": "jest --config .jestrc"
+    "test": "jest --config .jestrc",
+    "jest-html": "jest-html"
   },
   "author": "",
   "license": "ISC",
@@ -17,6 +18,7 @@
     "babel-preset-react-hmre": "^1.1.1",
     "enzyme": "^2.7.1",
     "jest": "^19.0.2",
+    "jest-html": "^1.3.4",
     "jest-serializer-enzyme": "^1.0.0",
     "react": "^15.4.2",
     "react-addons-test-utils": "^15.4.2",

src/__tests__/__snapshots__/test-enzyme.js.snap

@@ -16,4 +16,14 @@ exports[`Greeting Hello enzyme is displayed? 1`] = `
     </div>
   </div>
 </App>
+------------HTML PREVIEW---------------
+<App greeting="Hello enzyme">
+  <div class="container">
+    <div class="jumbotron">
+      <h1>
+        Hello enzyme
+      </h1>
+    </div>
+  </div>
+</App>
 `;

src/__tests__/__snapshots__/test-simple.js.snap

@@ -12,4 +12,12 @@ exports[`Greeting Hello simple is displayed? 1`] = `
     </h1>
   </div>
 </div>
+------------HTML PREVIEW---------------
+<div class="container">
+  <div class="jumbotron">
+    <h1>
+      Hello simple
+    </h1>
+  </div>
+</div>
 `;