Added snapshot based test

package.json

@@ -13,6 +13,7 @@
     "path-match": "^1.2.4",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
+    "react-test-renderer": "^15.4.2",
     "serializr": "^1.1.9"
   },
   "scripts": {

src/components/App.test.js

@@ -2,16 +2,30 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
 import { Provider } from 'mobx-react'
+import renderer from 'react-test-renderer'
+import fs from "fs"
 
 import ShopStore from "../stores/ShopStore"
 
-it('renders without crashing', () => {
-  const shop = new ShopStore(() => Promise.resolve([]));
+const bookFetcher = () => Promise.resolve(JSON.parse(fs.readFileSync("./public/books.json")))
 
-  const div = document.createElement('div')
-  ReactDOM.render(
+it('matches snapshot before and after loading', (done) => {
+  const shop = new ShopStore(bookFetcher)
+
+  const app = renderer.create(
     <Provider shop={shop}>
       <App />
-    </Provider>,
-    div)
+    </Provider>
+  )
+  let tree = app.toJSON()
+  expect(tree).toMatchSnapshot()
+
+  setTimeout(
+    () => {
+      let tree = app.toJSON()
+      expect(tree).toMatchSnapshot()
+      done()
+    },
+    100
+  )
 })

src/components/__snapshots__/App.test.js.snap

@@ -0,0 +1,100 @@
+exports[`test matches snapshot before and after loading 1`] = `
+<div
+  className="App">
+  <div
+    className="App-header">
+    <img
+      alt="logo"
+      className="App-logo"
+      src="logo.svg" />
+    <h2>
+      Welcome to the React MobX Book shop!
+    </h2>
+  </div>
+  <ul
+    className="App-menu">
+    <li>
+      <a
+        onClick={[Function]}>
+        Available books
+      </a>
+    </li>
+    <li>
+      <a
+        onClick={[Function]}>
+        Your cart
+      </a>
+    </li>
+  </ul>
+  <h1>
+    Loading...
+  </h1>
+</div>
+`;
+
+exports[`test matches snapshot before and after loading 2`] = `
+<div
+  className="App">
+  <div
+    className="App-header">
+    <img
+      alt="logo"
+      className="App-logo"
+      src="logo.svg" />
+    <h2>
+      Welcome to the React MobX Book shop!
+    </h2>
+  </div>
+  <ul
+    className="App-menu">
+    <li>
+      <a
+        onClick={[Function]}>
+        Available books
+      </a>
+    </li>
+    <li>
+      <a
+        onClick={[Function]}>
+        Your cart
+      </a>
+    </li>
+  </ul>
+  <section
+    className="Page-books">
+    <h1>
+      Available books
+    </h1>
+    <ol>
+      <li>
+        <a
+          href="/book/978-1933988177"
+          onClick={[Function]}>
+          Lucene in Action, Second Edition
+        </a>
+      </li>
+      <li>
+        <a
+          href="/book/978-1857995879"
+          onClick={[Function]}>
+          Sophie\'s World : The Greek Philosophers
+        </a>
+      </li>
+      <li>
+        <a
+          href="/book/978-0641723445"
+          onClick={[Function]}>
+          The Lightning Thief
+        </a>
+      </li>
+      <li>
+        <a
+          href="/book/978-1423103349"
+          onClick={[Function]}>
+          The Sea of Monsters
+        </a>
+      </li>
+    </ol>
+  </section>
+</div>
+`;

yarn.lock

@@ -4572,6 +4572,13 @@ react-dom@^15.4.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.0"
 
+react-test-renderer@^15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.4.2.tgz#27e1dff5d26d0e830f99614c487622bc831416f3"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react@^15.4.2:
   version "15.4.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"