From 751a9482533b96d958ed1d23cb8b72aec3be8dcb Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Mon, 6 Feb 2017 15:44:03 +0200
Subject: [PATCH 1/7] Add Enzyme and related packages for testing

---
 package.json |   7 +-
 yarn.lock    | 193 ++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 187 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index e4420155..5d2a1298 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "react-intl": "^2.2.3",
     "react-redux": "^5.0.2",
     "react-router": "4.0.0-alpha.6",
-    "react-test-renderer": "^15.4.2",
     "redux": "^3.6.0",
     "redux-form": "^6.5.0",
     "redux-saga": "^0.14.3",
@@ -27,8 +26,12 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
+    "enzyme": "^2.7.1",
+    "enzyme-to-json": "^1.4.5",
     "nodemon": "^1.11.0",
-    "prettier": "^0.13.1"
+    "prettier": "^0.13.1",
+    "react-addons-test-utils": "^15.4.2",
+    "react-test-renderer": "^15.4.2"
   },
   "scripts": {
     "clean": "rm -rf build/*",
diff --git a/yarn.lock b/yarn.lock
index f4f3b313..0c062c0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1172,6 +1172,27 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+cheerio@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
+  dependencies:
+    css-select "~1.2.0"
+    dom-serializer "~0.1.0"
+    entities "~1.1.1"
+    htmlparser2 "^3.9.1"
+    lodash.assignin "^4.0.9"
+    lodash.bind "^4.1.4"
+    lodash.defaults "^4.0.1"
+    lodash.filter "^4.4.0"
+    lodash.flatten "^4.2.0"
+    lodash.foreach "^4.3.0"
+    lodash.map "^4.4.0"
+    lodash.merge "^4.4.0"
+    lodash.pick "^4.2.1"
+    lodash.reduce "^4.4.0"
+    lodash.reject "^4.4.0"
+    lodash.some "^4.4.0"
+
 chokidar@^1.0.0, chokidar@^1.4.3:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
@@ -1520,7 +1541,7 @@ css-loader@0.26.0:
     postcss-modules-values "^1.1.0"
     source-list-map "^0.1.4"
 
-css-select@^1.1.0:
+css-select@^1.1.0, css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
   dependencies:
@@ -1739,7 +1760,7 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-dom-serializer@0:
+dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
   dependencies:
@@ -1750,7 +1771,7 @@ domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
 
@@ -1764,13 +1785,19 @@ domhandler@2.1:
   dependencies:
     domelementtype "1"
 
+domhandler@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
+  dependencies:
+    domelementtype "1"
+
 domutils@1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
   dependencies:
     domelementtype "1"
 
-domutils@1.5.1:
+domutils@1.5.1, domutils@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   dependencies:
@@ -1836,10 +1863,34 @@ enhanced-resolve@~0.9.0:
     memory-fs "^0.2.0"
     tapable "^0.1.8"
 
-entities@~1.1.1:
+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@^1.4.5:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-1.4.5.tgz#698d6c209b54527aa3e28658e34b5d9f976f8016"
+  dependencies:
+    lodash.compact "^3.0.1"
+    lodash.isplainobject "^4.0.6"
+    lodash.omitby "^4.5.0"
+    object-values "^1.0.0"
+    object.entries "^1.0.3"
+
+enzyme@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-2.7.1.tgz#76370e1d99e91f73091bb8c4314b7c128cc2d621"
+  dependencies:
+    cheerio "^0.22.0"
+    function.prototype.name "^1.0.0"
+    is-subset "^0.1.1"
+    lodash "^4.17.2"
+    object-is "^1.0.1"
+    object.assign "^4.0.4"
+    object.entries "^1.0.3"
+    object.values "^1.0.3"
+    uuid "^2.0.3"
+
 "errno@>=0.1.1 <0.2.0-0", errno@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
@@ -1852,7 +1903,7 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.5.0:
+es-abstract@^1.5.0, es-abstract@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.6.1.tgz#bb8a2064120abcf928a086ea3d9043114285ec99"
   dependencies:
@@ -2443,6 +2494,14 @@ function-bind@^1.0.2, function-bind@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
 
+function.prototype.name@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.0.0.tgz#5f523ca64e491a5f95aba80cc1e391080a14482e"
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.0"
+    is-callable "^1.1.2"
+
 gauge@~2.7.1:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.2.tgz#15cecc31b02d05345a5d6b0e171cdb3ad2307774"
@@ -2713,6 +2772,17 @@ html-webpack-plugin@2.24.0:
     pretty-error "^2.0.2"
     toposort "^1.0.0"
 
+htmlparser2@^3.9.1:
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
+  dependencies:
+    domelementtype "^1.3.0"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^2.0.2"
+
 htmlparser2@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@@ -2905,7 +2975,7 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
-is-callable@^1.1.1, is-callable@^1.1.3:
+is-callable@^1.1.1, is-callable@^1.1.2, is-callable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
 
@@ -3042,6 +3112,10 @@ is-stream@^1.0.0, is-stream@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+is-subset@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
+
 is-svg@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
@@ -3604,6 +3678,14 @@ lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
 
+lodash.assignin@^4.0.9:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assignin/-/lodash.assignin-4.2.0.tgz#ba8df5fb841eb0a3e8044232b0e263a8dc6a28a2"
+
+lodash.bind@^4.1.4:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -3615,6 +3697,10 @@ lodash.clonedeep@^3.0.0:
     lodash._baseclone "^3.0.0"
     lodash._bindcallback "^3.0.0"
 
+lodash.compact@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.compact/-/lodash.compact-3.0.1.tgz#540ce3837745975807471e16b4a2ba21e7256ca5"
+
 lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
@@ -3626,6 +3712,22 @@ lodash.defaults@^3.1.2:
     lodash.assign "^3.0.0"
     lodash.restparam "^3.0.0"
 
+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:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.filter/-/lodash.filter-4.6.0.tgz#668b1d4981603ae1cc5a6fa760143e480b4c4ace"
+
+lodash.flatten@^4.2.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
+
+lodash.foreach@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
+
 lodash.indexof@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
@@ -3638,6 +3740,10 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+
 lodash.keys@^3.0.0, lodash.keys@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@@ -3646,22 +3752,46 @@ lodash.keys@^3.0.0, lodash.keys@^3.1.2:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
+lodash.map@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
+
 lodash.memoize@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
+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.5.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.pickby@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
 
-lodash.reduce@4.6.0:
+lodash.reduce@4.6.0, lodash.reduce@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
 
+lodash.reject@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.reject/-/lodash.reject-4.6.0.tgz#80d6492dc1470864bbf583533b651f42a9f52415"
+
 lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
+lodash.some@^4.4.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
+
 lodash.template@^4.2.4:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
@@ -3679,7 +3809,7 @@ lodash.uniq@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.14.0, lodash@^4.16.2, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4051,10 +4181,35 @@ object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
-object-keys@^1.0.8:
+object-is@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
+
+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"
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.0"
+    object-keys "^1.0.10"
+
+object.entries@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.4.tgz#1bf9a4dd2288f5b33f3a993d257661f05d161a5f"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -4062,6 +4217,15 @@ object.omit@^2.0.0:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
+object.values@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.6.1"
+    function-bind "^1.1.0"
+    has "^1.0.1"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -4923,6 +5087,13 @@ rc@^1.0.1, rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~1.0.4"
 
+react-addons-test-utils@^15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-broadcast@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/react-broadcast/-/react-broadcast-0.1.2.tgz#950de63578a2af399a396067a617af7402182330"
@@ -6005,7 +6176,7 @@ utils-merge@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
 
-uuid@^2.0.1, uuid@^2.0.2:
+uuid@^2.0.1, uuid@^2.0.2, uuid@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
 

From fc568292a97ae1bd7197685463236ba6c93a3e07 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Mon, 6 Feb 2017 16:12:10 +0200
Subject: [PATCH 2/7] Extract snapshot rendering into a helper function

---
 src/components/BookingInfo/BookingInfo.test.js     |  5 ++---
 src/components/FilterPanel/FilterPanel.test.js     | 14 +++++---------
 src/components/HeroSection/HeroSection.test.js     | 14 +++++---------
 src/components/ListingCard/ListingCard.test.js     | 14 +++++---------
 .../ListingCardSmall/ListingCardSmall.test.js      | 14 +++++---------
 src/components/MapPanel/MapPanel.test.js           | 14 +++++---------
 src/components/Menu/Menu.test.js                   |  8 ++------
 .../OrderDetailsPanel/OrderDetailsPanel.test.js    | 14 +++++---------
 .../OrderDiscussionPanel.test.js                   | 14 +++++---------
 .../SearchResultsPanel/SearchResultsPanel.test.js  | 14 +++++---------
 .../AuthenticationPage/AuthenticationPage.test.js  | 10 ++--------
 .../ChangeAccountPasswordForm.test.js              | 10 ++--------
 .../ChangePasswordForm/ChangePasswordForm.test.js  | 10 ++--------
 src/containers/CheckoutPage/CheckoutPage.test.js   | 14 +++++---------
 .../ContactDetailsPage/ContactDetailsPage.test.js  | 10 ++--------
 .../EditProfilePage/EditProfilePage.test.js        | 10 ++--------
 .../HeroSearchForm/HeroSearchForm.test.js          | 14 ++------------
 src/containers/InboxPage/InboxPage.test.js         | 10 ++--------
 src/containers/LandingPage/LandingPage.test.js     | 14 +++++---------
 src/containers/ListingPage/ListingPage.test.js     | 14 +++++---------
 src/containers/LoginForm/LoginForm.test.js         | 10 ++--------
 .../ManageListingsPage/ManageListingsPage.test.js  | 10 ++--------
 src/containers/NotFoundPage/NotFoundPage.test.js   | 10 ++--------
 src/containers/OrderPage/OrderPage.test.js         | 14 +++++---------
 .../PasswordChangePage/PasswordChangePage.test.js  | 10 ++--------
 .../PasswordForgottenForm.test.js                  | 12 ++----------
 .../PasswordForgottenPage.test.js                  | 10 ++--------
 .../PayoutPreferencesPage.test.js                  | 10 ++--------
 src/containers/ProfilePage/ProfilePage.test.js     | 10 ++--------
 .../SalesConversationPage.test.js                  | 10 ++--------
 src/containers/SearchPage/SearchPage.test.js       | 14 +++++---------
 src/containers/SecurityPage/SecurityPage.test.js   | 10 ++--------
 src/containers/SignUpForm/SignUpForm.test.js       | 10 ++--------
 src/util/test-helpers.js                           | 10 ++++++++++
 34 files changed, 115 insertions(+), 276 deletions(-)

diff --git a/src/components/BookingInfo/BookingInfo.test.js b/src/components/BookingInfo/BookingInfo.test.js
index 8d4dd881..139d535a 100644
--- a/src/components/BookingInfo/BookingInfo.test.js
+++ b/src/components/BookingInfo/BookingInfo.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { renderTree } from '../../util/test-helpers';
 import BookingInfo from './BookingInfo';
 
 describe('BookingInfo', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
+    const tree = renderTree(
       <BookingInfo
         pricePerDay="55\\u20AC"
         bookingPeriod="Jan 2nd - Jan 4th"
@@ -12,7 +12,6 @@ describe('BookingInfo', () => {
         total="165\u20AC"
       />,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/FilterPanel/FilterPanel.test.js b/src/components/FilterPanel/FilterPanel.test.js
index fd416a8e..bff176f3 100644
--- a/src/components/FilterPanel/FilterPanel.test.js
+++ b/src/components/FilterPanel/FilterPanel.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 import FilterPanel from './FilterPanel';
 
 describe('FilterPanel', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <FilterPanel />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <FilterPanel />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/HeroSection/HeroSection.test.js b/src/components/HeroSection/HeroSection.test.js
index 3717fb28..5e2e1d80 100644
--- a/src/components/HeroSection/HeroSection.test.js
+++ b/src/components/HeroSection/HeroSection.test.js
@@ -1,18 +1,14 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import HeroSection from './HeroSection';
 
 describe('HeroSection', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <HeroSection params={{ displayName: 'most-awesome-shop' }}>
-          test
-        </HeroSection>
-      </TestProvider>,
+    const tree = renderTree(
+      <HeroSection params={{ displayName: 'most-awesome-shop' }}>
+        test
+      </HeroSection>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/ListingCard/ListingCard.test.js b/src/components/ListingCard/ListingCard.test.js
index 10a2d624..58835d92 100644
--- a/src/components/ListingCard/ListingCard.test.js
+++ b/src/components/ListingCard/ListingCard.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 import ListingCard from './ListingCard';
@@ -20,14 +19,11 @@ describe('ListingCard', () => {
         review: { rating: '4' },
       },
     };
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <ListingCard {...listing} />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <ListingCard {...listing} />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/ListingCardSmall/ListingCardSmall.test.js b/src/components/ListingCardSmall/ListingCardSmall.test.js
index aaedf380..ca8ff0f0 100644
--- a/src/components/ListingCardSmall/ListingCardSmall.test.js
+++ b/src/components/ListingCardSmall/ListingCardSmall.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 import ListingCardSmall from './ListingCardSmall';
@@ -20,14 +19,11 @@ describe('ListingCardSmall', () => {
         review: { rating: '4' },
       },
     };
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <ListingCardSmall {...listing} />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <ListingCardSmall {...listing} />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/MapPanel/MapPanel.test.js b/src/components/MapPanel/MapPanel.test.js
index ada34d9c..6d3c2b45 100644
--- a/src/components/MapPanel/MapPanel.test.js
+++ b/src/components/MapPanel/MapPanel.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 import MapPanel from './MapPanel';
 
 describe('MapPanel', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <MapPanel />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <MapPanel />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/Menu/Menu.test.js b/src/components/Menu/Menu.test.js
index a23c1acd..2d0ff5b3 100644
--- a/src/components/Menu/Menu.test.js
+++ b/src/components/Menu/Menu.test.js
@@ -1,14 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
+import { renderTree } from '../../util/test-helpers';
 import Menu from './Menu';
 
 describe('Menu', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(<Menu />);
-    const tree = component.toJSON();
+    const tree = renderTree(<Menu />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
index 557f7ea9..9c20623b 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import OrderDetailsPanel from './OrderDetailsPanel.js';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
@@ -24,14 +23,11 @@ describe('OrderDetailsPanel', () => {
       },
       confirmationCode: 'some-test-confirmation-code',
     };
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <OrderDetailsPanel {...props} />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <OrderDetailsPanel {...props} />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js b/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js
index a26cab3b..197fbfdc 100644
--- a/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js
+++ b/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import OrderDiscussionPanel from './OrderDiscussionPanel.js';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 
 describe('OrderDiscussionPanel', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <OrderDiscussionPanel />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <OrderDiscussionPanel />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.test.js b/src/components/SearchResultsPanel/SearchResultsPanel.test.js
index d45404d0..2788349d 100644
--- a/src/components/SearchResultsPanel/SearchResultsPanel.test.js
+++ b/src/components/SearchResultsPanel/SearchResultsPanel.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 import SearchResultsPanel from './SearchResultsPanel';
 
 describe('SearchResultsPanel', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <SearchResultsPanel />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <SearchResultsPanel />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.test.js b/src/containers/AuthenticationPage/AuthenticationPage.test.js
index 9d7b1503..e3e92cac 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.test.js
+++ b/src/containers/AuthenticationPage/AuthenticationPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import AuthenticationPage from './AuthenticationPage';
 
 describe('AuthenticationPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <AuthenticationPage location={{ state: { from: '/protected' } }} />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<AuthenticationPage location={{ state: { from: '/protected' } }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js
index dc73fa5f..f8efbbbb 100644
--- a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js
+++ b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import ChangeAccountPasswordForm from './ChangeAccountPasswordForm';
 
 describe('ChangeAccountPasswordForm', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <ChangeAccountPasswordForm />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<ChangeAccountPasswordForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ChangePasswordForm/ChangePasswordForm.test.js b/src/containers/ChangePasswordForm/ChangePasswordForm.test.js
index 29fa32ce..a0f3c073 100644
--- a/src/containers/ChangePasswordForm/ChangePasswordForm.test.js
+++ b/src/containers/ChangePasswordForm/ChangePasswordForm.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import ChangePasswordForm from './ChangePasswordForm';
 
 describe('ChangePasswordForm', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <ChangePasswordForm />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<ChangePasswordForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/CheckoutPage/CheckoutPage.test.js b/src/containers/CheckoutPage/CheckoutPage.test.js
index a530fe97..b1c8a7f1 100644
--- a/src/containers/CheckoutPage/CheckoutPage.test.js
+++ b/src/containers/CheckoutPage/CheckoutPage.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import CheckoutPage from './CheckoutPage';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 
 describe('CheckoutPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <CheckoutPage params={{ listingId: 'some-listing-id' }} />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <CheckoutPage params={{ listingId: 'some-listing-id' }} />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ContactDetailsPage/ContactDetailsPage.test.js b/src/containers/ContactDetailsPage/ContactDetailsPage.test.js
index c051c09f..df6ef1eb 100644
--- a/src/containers/ContactDetailsPage/ContactDetailsPage.test.js
+++ b/src/containers/ContactDetailsPage/ContactDetailsPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import ContactDetailsPage from './ContactDetailsPage';
 
 describe('ContactDetailsPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <ContactDetailsPage params={{ displayName: 'my-shop' }} />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<ContactDetailsPage params={{ displayName: 'my-shop' }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/EditProfilePage/EditProfilePage.test.js b/src/containers/EditProfilePage/EditProfilePage.test.js
index 4ac3125b..9af3ab30 100644
--- a/src/containers/EditProfilePage/EditProfilePage.test.js
+++ b/src/containers/EditProfilePage/EditProfilePage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import EditProfilePage from './EditProfilePage';
 
 describe('EditProfilePage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <EditProfilePage params={{ displayName: 'my-shop' }} />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<EditProfilePage params={{ displayName: 'my-shop' }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/HeroSearchForm/HeroSearchForm.test.js b/src/containers/HeroSearchForm/HeroSearchForm.test.js
index 23b8362f..90ea07ba 100644
--- a/src/containers/HeroSearchForm/HeroSearchForm.test.js
+++ b/src/containers/HeroSearchForm/HeroSearchForm.test.js
@@ -1,20 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { Provider } from 'react-redux';
-import { injectIntl, IntlProvider } from 'react-intl';
-import configureStore from '../../store';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import HeroSearchForm from './HeroSearchForm';
 
 describe('HeroSearchForm', () => {
   it('matches snapshot', () => {
-    const store = configureStore();
-    const component = renderer.create(
-      <TestProvider>
-        <HeroSearchForm />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<HeroSearchForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/InboxPage/InboxPage.test.js b/src/containers/InboxPage/InboxPage.test.js
index e9ac2ecb..e19435ce 100644
--- a/src/containers/InboxPage/InboxPage.test.js
+++ b/src/containers/InboxPage/InboxPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import InboxPage from './InboxPage';
 
 describe('InboxPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <InboxPage filter="inbox" />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<InboxPage filter="inbox" />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/LandingPage/LandingPage.test.js b/src/containers/LandingPage/LandingPage.test.js
index d9ab2cea..a34ca3b5 100644
--- a/src/containers/LandingPage/LandingPage.test.js
+++ b/src/containers/LandingPage/LandingPage.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { LandingPageComponent } from './LandingPage';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 
 describe('LandingPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <LandingPageComponent onLocationChanged={v => v} />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <LandingPageComponent onLocationChanged={v => v} />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ListingPage/ListingPage.test.js b/src/containers/ListingPage/ListingPage.test.js
index 0b296af8..f56a89d9 100644
--- a/src/containers/ListingPage/ListingPage.test.js
+++ b/src/containers/ListingPage/ListingPage.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 import ListingPage from './ListingPage';
 
 describe('ListingPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <ListingPage params={{ slug: 'banyan-studios', id: 1234 }} />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <ListingPage params={{ slug: 'banyan-studios', id: 1234 }} />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/LoginForm/LoginForm.test.js b/src/containers/LoginForm/LoginForm.test.js
index 0c618e95..08854d6b 100644
--- a/src/containers/LoginForm/LoginForm.test.js
+++ b/src/containers/LoginForm/LoginForm.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import LoginForm from './LoginForm';
 
 describe('LoginForm', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <LoginForm />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<LoginForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ManageListingsPage/ManageListingsPage.test.js b/src/containers/ManageListingsPage/ManageListingsPage.test.js
index 1f991cc6..78e0e447 100644
--- a/src/containers/ManageListingsPage/ManageListingsPage.test.js
+++ b/src/containers/ManageListingsPage/ManageListingsPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import ManageListingsPage from './ManageListingsPage';
 
 describe('ManageListingsPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <ManageListingsPage />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<ManageListingsPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/NotFoundPage/NotFoundPage.test.js b/src/containers/NotFoundPage/NotFoundPage.test.js
index fb5fcc1d..d4bbc959 100644
--- a/src/containers/NotFoundPage/NotFoundPage.test.js
+++ b/src/containers/NotFoundPage/NotFoundPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import NotFoundPage from './NotFoundPage';
 
 describe('NotFoundPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <NotFoundPage />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<NotFoundPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/OrderPage/OrderPage.test.js b/src/containers/OrderPage/OrderPage.test.js
index cd1988ab..51c19c26 100644
--- a/src/containers/OrderPage/OrderPage.test.js
+++ b/src/containers/OrderPage/OrderPage.test.js
@@ -1,20 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import OrderPage from './OrderPage';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 
 describe('OrderPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <OrderPage params={{ id: 1234 }} tab="details" />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <OrderPage params={{ id: 1234 }} tab="details" />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PasswordChangePage/PasswordChangePage.test.js b/src/containers/PasswordChangePage/PasswordChangePage.test.js
index e2e0670d..a978b3e3 100644
--- a/src/containers/PasswordChangePage/PasswordChangePage.test.js
+++ b/src/containers/PasswordChangePage/PasswordChangePage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import PasswordChangePage from './PasswordChangePage';
 
 describe('PasswordChangePage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <PasswordChangePage />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<PasswordChangePage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js b/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js
index 3708f339..3197b48b 100644
--- a/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js
+++ b/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js
@@ -1,18 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { Provider } from 'react-redux';
-import configureStore from '../../store';
+import { renderTree } from '../../util/test-helpers';
 import PasswordForgottenForm from './PasswordForgottenForm';
 
 describe('PasswordForgottenForm', () => {
   it('matches snapshot', () => {
-    const store = configureStore();
-    const component = renderer.create(
-      <Provider store={store}>
-        <PasswordForgottenForm />
-      </Provider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<PasswordForgottenForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js b/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js
index b250fcda..714442f1 100644
--- a/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js
+++ b/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import PasswordForgottenPage from './PasswordForgottenPage';
 
 describe('PasswordForgottenPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <PasswordForgottenPage />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<PasswordForgottenPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js b/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js
index 0fbf5530..497a5455 100644
--- a/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js
+++ b/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import PayoutPreferencesPage from './PayoutPreferencesPage';
 
 describe('PayoutPreferencesPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <PayoutPreferencesPage />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<PayoutPreferencesPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ProfilePage/ProfilePage.test.js b/src/containers/ProfilePage/ProfilePage.test.js
index d182ef7e..382836b0 100644
--- a/src/containers/ProfilePage/ProfilePage.test.js
+++ b/src/containers/ProfilePage/ProfilePage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import ProfilePage from './ProfilePage';
 
 describe('ProfilePage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <ProfilePage params={{ displayName: 'most-awesome-shop' }} />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<ProfilePage params={{ displayName: 'most-awesome-shop' }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SalesConversationPage/SalesConversationPage.test.js b/src/containers/SalesConversationPage/SalesConversationPage.test.js
index a0fe67ed..d9689ad4 100644
--- a/src/containers/SalesConversationPage/SalesConversationPage.test.js
+++ b/src/containers/SalesConversationPage/SalesConversationPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import SalesConversationPage from './SalesConversationPage';
 
 describe('SalesConversationPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <SalesConversationPage params={{ id: 12345 }} />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<SalesConversationPage params={{ id: 12345 }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SearchPage/SearchPage.test.js b/src/containers/SearchPage/SearchPage.test.js
index 172db280..1a5c878a 100644
--- a/src/containers/SearchPage/SearchPage.test.js
+++ b/src/containers/SearchPage/SearchPage.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import { SearchPageComponent } from './SearchPage';
 import reducer, { ADD_FILTER, addFilter, initialState } from './SearchPage.ducks';
 import { RoutesProvider } from '../../components';
@@ -8,14 +7,11 @@ import routesConfiguration from '../../routesConfiguration';
 
 describe('SearchPageComponent', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <RoutesProvider routes={routesConfiguration}>
-          <SearchPageComponent onLoadListings={v => v} />
-        </RoutesProvider>
-      </TestProvider>,
+    const tree = renderTree(
+      <RoutesProvider routes={routesConfiguration}>
+        <SearchPageComponent onLoadListings={v => v} />
+      </RoutesProvider>,
     );
-    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SecurityPage/SecurityPage.test.js b/src/containers/SecurityPage/SecurityPage.test.js
index cf9217a3..78a137c3 100644
--- a/src/containers/SecurityPage/SecurityPage.test.js
+++ b/src/containers/SecurityPage/SecurityPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import SecurityPage from './SecurityPage';
 
 describe('SecurityPage', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <SecurityPage />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<SecurityPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SignUpForm/SignUpForm.test.js b/src/containers/SignUpForm/SignUpForm.test.js
index 01903cc0..accf8b1c 100644
--- a/src/containers/SignUpForm/SignUpForm.test.js
+++ b/src/containers/SignUpForm/SignUpForm.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { TestProvider } from '../../util/test-helpers';
+import { renderTree } from '../../util/test-helpers';
 import SignUpForm from './SignUpForm';
 
 describe('SignUpForm', () => {
   it('matches snapshot', () => {
-    const component = renderer.create(
-      <TestProvider>
-        <SignUpForm />
-      </TestProvider>,
-    );
-    const tree = component.toJSON();
+    const tree = renderTree(<SignUpForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/util/test-helpers.js b/src/util/test-helpers.js
index cb0857bb..7d40dda4 100644
--- a/src/util/test-helpers.js
+++ b/src/util/test-helpers.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import renderer from 'react-test-renderer';
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router';
 import { Provider } from 'react-redux';
@@ -16,3 +17,12 @@ export const TestProvider = props => {
     </IntlProvider>
   );
 };
+
+export const renderTree = children => {
+  const comp = renderer.create(
+    <TestProvider>
+      {children}
+    </TestProvider>,
+  );
+  return comp.toJSON();
+};

From f142f312915795e33ceb550619ae092a5603dd2d Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 7 Feb 2017 11:08:26 +0200
Subject: [PATCH 3/7] Separate shallow and deep render for snapshot tests

---
 src/components/BookingInfo/BookingInfo.test.js         |  4 ++--
 src/components/FilterPanel/FilterPanel.test.js         | 10 ++--------
 src/components/HeroSection/HeroSection.test.js         |  4 ++--
 src/components/ListingCard/ListingCard.test.js         | 10 ++--------
 .../ListingCardSmall/ListingCardSmall.test.js          |  4 ++--
 src/components/MapPanel/MapPanel.test.js               | 10 ++--------
 src/components/Menu/Menu.test.js                       |  4 ++--
 .../OrderDetailsPanel/OrderDetailsPanel.test.js        | 10 ++--------
 .../OrderDiscussionPanel/OrderDiscussionPanel.test.js  | 10 ++--------
 .../SearchResultsPanel/SearchResultsPanel.test.js      | 10 ++--------
 .../AuthenticationPage/AuthenticationPage.test.js      |  4 ++--
 .../ChangeAccountPasswordForm.test.js                  |  4 ++--
 .../ChangePasswordForm/ChangePasswordForm.test.js      |  4 ++--
 src/containers/CheckoutPage/CheckoutPage.test.js       | 10 ++--------
 .../ContactDetailsPage/ContactDetailsPage.test.js      |  4 ++--
 src/containers/EditProfilePage/EditProfilePage.test.js |  4 ++--
 src/containers/HeroSearchForm/HeroSearchForm.test.js   |  4 ++--
 src/containers/InboxPage/InboxPage.test.js             |  4 ++--
 src/containers/LandingPage/LandingPage.test.js         |  8 ++------
 src/containers/ListingPage/ListingPage.test.js         | 10 ++--------
 src/containers/LoginForm/LoginForm.test.js             |  4 ++--
 .../ManageListingsPage/ManageListingsPage.test.js      |  4 ++--
 src/containers/NotFoundPage/NotFoundPage.test.js       |  4 ++--
 src/containers/OrderPage/OrderPage.test.js             | 10 ++--------
 .../PasswordChangePage/PasswordChangePage.test.js      |  4 ++--
 .../PasswordForgottenForm.test.js                      |  4 ++--
 .../PasswordForgottenPage.test.js                      |  4 ++--
 .../PayoutPreferencesPage.test.js                      |  4 ++--
 src/containers/ProfilePage/ProfilePage.test.js         |  4 ++--
 .../SalesConversationPage.test.js                      |  4 ++--
 src/containers/SearchPage/SearchPage.test.js           | 10 ++--------
 src/containers/SecurityPage/SecurityPage.test.js       |  4 ++--
 src/containers/SignUpForm/SignUpForm.test.js           |  4 ++--
 src/util/test-helpers.js                               | 10 ++++++++--
 34 files changed, 74 insertions(+), 132 deletions(-)

diff --git a/src/components/BookingInfo/BookingInfo.test.js b/src/components/BookingInfo/BookingInfo.test.js
index 139d535a..342e2409 100644
--- a/src/components/BookingInfo/BookingInfo.test.js
+++ b/src/components/BookingInfo/BookingInfo.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import BookingInfo from './BookingInfo';
 
 describe('BookingInfo', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
+    const tree = renderDeep(
       <BookingInfo
         pricePerDay="55\\u20AC"
         bookingPeriod="Jan 2nd - Jan 4th"
diff --git a/src/components/FilterPanel/FilterPanel.test.js b/src/components/FilterPanel/FilterPanel.test.js
index bff176f3..28ada261 100644
--- a/src/components/FilterPanel/FilterPanel.test.js
+++ b/src/components/FilterPanel/FilterPanel.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
+import { renderShallow } from '../../util/test-helpers';
 import FilterPanel from './FilterPanel';
 
 describe('FilterPanel', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <FilterPanel />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<FilterPanel />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/HeroSection/HeroSection.test.js b/src/components/HeroSection/HeroSection.test.js
index 5e2e1d80..25e550d1 100644
--- a/src/components/HeroSection/HeroSection.test.js
+++ b/src/components/HeroSection/HeroSection.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import HeroSection from './HeroSection';
 
 describe('HeroSection', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
+    const tree = renderDeep(
       <HeroSection params={{ displayName: 'most-awesome-shop' }}>
         test
       </HeroSection>,
diff --git a/src/components/ListingCard/ListingCard.test.js b/src/components/ListingCard/ListingCard.test.js
index 58835d92..052894c5 100644
--- a/src/components/ListingCard/ListingCard.test.js
+++ b/src/components/ListingCard/ListingCard.test.js
@@ -1,7 +1,5 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
+import { renderShallow } from '../../util/test-helpers';
 import ListingCard from './ListingCard';
 
 describe('ListingCard', () => {
@@ -19,11 +17,7 @@ describe('ListingCard', () => {
         review: { rating: '4' },
       },
     };
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <ListingCard {...listing} />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<ListingCard {...listing} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/ListingCardSmall/ListingCardSmall.test.js b/src/components/ListingCardSmall/ListingCardSmall.test.js
index ca8ff0f0..7b4f74d8 100644
--- a/src/components/ListingCardSmall/ListingCardSmall.test.js
+++ b/src/components/ListingCardSmall/ListingCardSmall.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 import ListingCardSmall from './ListingCardSmall';
@@ -19,7 +19,7 @@ describe('ListingCardSmall', () => {
         review: { rating: '4' },
       },
     };
-    const tree = renderTree(
+    const tree = renderDeep(
       <RoutesProvider routes={routesConfiguration}>
         <ListingCardSmall {...listing} />
       </RoutesProvider>,
diff --git a/src/components/MapPanel/MapPanel.test.js b/src/components/MapPanel/MapPanel.test.js
index 6d3c2b45..95787f3e 100644
--- a/src/components/MapPanel/MapPanel.test.js
+++ b/src/components/MapPanel/MapPanel.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
+import { renderShallow } from '../../util/test-helpers';
 import MapPanel from './MapPanel';
 
 describe('MapPanel', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <MapPanel />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<MapPanel />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/Menu/Menu.test.js b/src/components/Menu/Menu.test.js
index 2d0ff5b3..06729bd7 100644
--- a/src/components/Menu/Menu.test.js
+++ b/src/components/Menu/Menu.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import Menu from './Menu';
 
 describe('Menu', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<Menu />);
+    const tree = renderDeep(<Menu />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
index 9c20623b..ee0ae9e4 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.test.js
@@ -1,8 +1,6 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import OrderDetailsPanel from './OrderDetailsPanel.js';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
 
 describe('OrderDetailsPanel', () => {
   it('matches snapshot', () => {
@@ -23,11 +21,7 @@ describe('OrderDetailsPanel', () => {
       },
       confirmationCode: 'some-test-confirmation-code',
     };
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <OrderDetailsPanel {...props} />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<OrderDetailsPanel {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js b/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js
index 197fbfdc..486ebff5 100644
--- a/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js
+++ b/src/components/OrderDiscussionPanel/OrderDiscussionPanel.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import OrderDiscussionPanel from './OrderDiscussionPanel.js';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
 
 describe('OrderDiscussionPanel', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <OrderDiscussionPanel />
-      </RoutesProvider>,
-    );
+    const tree = renderDeep(<OrderDiscussionPanel />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/SearchResultsPanel/SearchResultsPanel.test.js b/src/components/SearchResultsPanel/SearchResultsPanel.test.js
index 2788349d..72d1d372 100644
--- a/src/components/SearchResultsPanel/SearchResultsPanel.test.js
+++ b/src/components/SearchResultsPanel/SearchResultsPanel.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
+import { renderShallow } from '../../util/test-helpers';
 import SearchResultsPanel from './SearchResultsPanel';
 
 describe('SearchResultsPanel', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <SearchResultsPanel />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<SearchResultsPanel />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.test.js b/src/containers/AuthenticationPage/AuthenticationPage.test.js
index e3e92cac..88b4b079 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.test.js
+++ b/src/containers/AuthenticationPage/AuthenticationPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import AuthenticationPage from './AuthenticationPage';
 
 describe('AuthenticationPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<AuthenticationPage location={{ state: { from: '/protected' } }} />);
+    const tree = renderShallow(<AuthenticationPage location={{ state: { from: '/protected' } }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js
index f8efbbbb..3e07b350 100644
--- a/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js
+++ b/src/containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import ChangeAccountPasswordForm from './ChangeAccountPasswordForm';
 
 describe('ChangeAccountPasswordForm', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<ChangeAccountPasswordForm />);
+    const tree = renderDeep(<ChangeAccountPasswordForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ChangePasswordForm/ChangePasswordForm.test.js b/src/containers/ChangePasswordForm/ChangePasswordForm.test.js
index a0f3c073..e936ab66 100644
--- a/src/containers/ChangePasswordForm/ChangePasswordForm.test.js
+++ b/src/containers/ChangePasswordForm/ChangePasswordForm.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import ChangePasswordForm from './ChangePasswordForm';
 
 describe('ChangePasswordForm', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<ChangePasswordForm />);
+    const tree = renderDeep(<ChangePasswordForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/CheckoutPage/CheckoutPage.test.js b/src/containers/CheckoutPage/CheckoutPage.test.js
index b1c8a7f1..6046922e 100644
--- a/src/containers/CheckoutPage/CheckoutPage.test.js
+++ b/src/containers/CheckoutPage/CheckoutPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import CheckoutPage from './CheckoutPage';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
 
 describe('CheckoutPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <CheckoutPage params={{ listingId: 'some-listing-id' }} />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<CheckoutPage params={{ listingId: 'some-listing-id' }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ContactDetailsPage/ContactDetailsPage.test.js b/src/containers/ContactDetailsPage/ContactDetailsPage.test.js
index df6ef1eb..bb5c018e 100644
--- a/src/containers/ContactDetailsPage/ContactDetailsPage.test.js
+++ b/src/containers/ContactDetailsPage/ContactDetailsPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import ContactDetailsPage from './ContactDetailsPage';
 
 describe('ContactDetailsPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<ContactDetailsPage params={{ displayName: 'my-shop' }} />);
+    const tree = renderShallow(<ContactDetailsPage params={{ displayName: 'my-shop' }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/EditProfilePage/EditProfilePage.test.js b/src/containers/EditProfilePage/EditProfilePage.test.js
index 9af3ab30..7fa4f23d 100644
--- a/src/containers/EditProfilePage/EditProfilePage.test.js
+++ b/src/containers/EditProfilePage/EditProfilePage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import EditProfilePage from './EditProfilePage';
 
 describe('EditProfilePage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<EditProfilePage params={{ displayName: 'my-shop' }} />);
+    const tree = renderShallow(<EditProfilePage params={{ displayName: 'my-shop' }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/HeroSearchForm/HeroSearchForm.test.js b/src/containers/HeroSearchForm/HeroSearchForm.test.js
index 90ea07ba..31580c1f 100644
--- a/src/containers/HeroSearchForm/HeroSearchForm.test.js
+++ b/src/containers/HeroSearchForm/HeroSearchForm.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import HeroSearchForm from './HeroSearchForm';
 
 describe('HeroSearchForm', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<HeroSearchForm />);
+    const tree = renderDeep(<HeroSearchForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/InboxPage/InboxPage.test.js b/src/containers/InboxPage/InboxPage.test.js
index e19435ce..0b1dcbcc 100644
--- a/src/containers/InboxPage/InboxPage.test.js
+++ b/src/containers/InboxPage/InboxPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import InboxPage from './InboxPage';
 
 describe('InboxPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<InboxPage filter="inbox" />);
+    const tree = renderShallow(<InboxPage filter="inbox" />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/LandingPage/LandingPage.test.js b/src/containers/LandingPage/LandingPage.test.js
index a34ca3b5..9e46c19e 100644
--- a/src/containers/LandingPage/LandingPage.test.js
+++ b/src/containers/LandingPage/LandingPage.test.js
@@ -1,16 +1,12 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import { LandingPageComponent } from './LandingPage';
 import { RoutesProvider } from '../../components';
 import routesConfiguration from '../../routesConfiguration';
 
 describe('LandingPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <LandingPageComponent onLocationChanged={v => v} />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<LandingPageComponent onLocationChanged={v => v} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ListingPage/ListingPage.test.js b/src/containers/ListingPage/ListingPage.test.js
index f56a89d9..9b7c1e52 100644
--- a/src/containers/ListingPage/ListingPage.test.js
+++ b/src/containers/ListingPage/ListingPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
+import { renderShallow } from '../../util/test-helpers';
 import ListingPage from './ListingPage';
 
 describe('ListingPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <ListingPage params={{ slug: 'banyan-studios', id: 1234 }} />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<ListingPage params={{ slug: 'banyan-studios', id: 1234 }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/LoginForm/LoginForm.test.js b/src/containers/LoginForm/LoginForm.test.js
index 08854d6b..bffa3a3b 100644
--- a/src/containers/LoginForm/LoginForm.test.js
+++ b/src/containers/LoginForm/LoginForm.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import LoginForm from './LoginForm';
 
 describe('LoginForm', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<LoginForm />);
+    const tree = renderDeep(<LoginForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ManageListingsPage/ManageListingsPage.test.js b/src/containers/ManageListingsPage/ManageListingsPage.test.js
index 78e0e447..61bdb1d2 100644
--- a/src/containers/ManageListingsPage/ManageListingsPage.test.js
+++ b/src/containers/ManageListingsPage/ManageListingsPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import ManageListingsPage from './ManageListingsPage';
 
 describe('ManageListingsPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<ManageListingsPage />);
+    const tree = renderShallow(<ManageListingsPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/NotFoundPage/NotFoundPage.test.js b/src/containers/NotFoundPage/NotFoundPage.test.js
index d4bbc959..b34e1278 100644
--- a/src/containers/NotFoundPage/NotFoundPage.test.js
+++ b/src/containers/NotFoundPage/NotFoundPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import NotFoundPage from './NotFoundPage';
 
 describe('NotFoundPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<NotFoundPage />);
+    const tree = renderShallow(<NotFoundPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/OrderPage/OrderPage.test.js b/src/containers/OrderPage/OrderPage.test.js
index 51c19c26..50888c38 100644
--- a/src/containers/OrderPage/OrderPage.test.js
+++ b/src/containers/OrderPage/OrderPage.test.js
@@ -1,16 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import OrderPage from './OrderPage';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
 
 describe('OrderPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <OrderPage params={{ id: 1234 }} tab="details" />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<OrderPage params={{ id: 1234 }} tab="details" />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PasswordChangePage/PasswordChangePage.test.js b/src/containers/PasswordChangePage/PasswordChangePage.test.js
index a978b3e3..ed8f2d16 100644
--- a/src/containers/PasswordChangePage/PasswordChangePage.test.js
+++ b/src/containers/PasswordChangePage/PasswordChangePage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import PasswordChangePage from './PasswordChangePage';
 
 describe('PasswordChangePage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<PasswordChangePage />);
+    const tree = renderShallow(<PasswordChangePage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js b/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js
index 3197b48b..64f14cd0 100644
--- a/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js
+++ b/src/containers/PasswordForgottenForm/PasswordForgottenForm.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import PasswordForgottenForm from './PasswordForgottenForm';
 
 describe('PasswordForgottenForm', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<PasswordForgottenForm />);
+    const tree = renderDeep(<PasswordForgottenForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js b/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js
index 714442f1..adf1e258 100644
--- a/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js
+++ b/src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import PasswordForgottenPage from './PasswordForgottenPage';
 
 describe('PasswordForgottenPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<PasswordForgottenPage />);
+    const tree = renderShallow(<PasswordForgottenPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js b/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js
index 497a5455..2b8f0c03 100644
--- a/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js
+++ b/src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import PayoutPreferencesPage from './PayoutPreferencesPage';
 
 describe('PayoutPreferencesPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<PayoutPreferencesPage />);
+    const tree = renderShallow(<PayoutPreferencesPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/ProfilePage/ProfilePage.test.js b/src/containers/ProfilePage/ProfilePage.test.js
index 382836b0..5e36535a 100644
--- a/src/containers/ProfilePage/ProfilePage.test.js
+++ b/src/containers/ProfilePage/ProfilePage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import ProfilePage from './ProfilePage';
 
 describe('ProfilePage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<ProfilePage params={{ displayName: 'most-awesome-shop' }} />);
+    const tree = renderShallow(<ProfilePage params={{ displayName: 'most-awesome-shop' }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SalesConversationPage/SalesConversationPage.test.js b/src/containers/SalesConversationPage/SalesConversationPage.test.js
index d9689ad4..4070e593 100644
--- a/src/containers/SalesConversationPage/SalesConversationPage.test.js
+++ b/src/containers/SalesConversationPage/SalesConversationPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import SalesConversationPage from './SalesConversationPage';
 
 describe('SalesConversationPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<SalesConversationPage params={{ id: 12345 }} />);
+    const tree = renderShallow(<SalesConversationPage params={{ id: 12345 }} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SearchPage/SearchPage.test.js b/src/containers/SearchPage/SearchPage.test.js
index 1a5c878a..de8aa864 100644
--- a/src/containers/SearchPage/SearchPage.test.js
+++ b/src/containers/SearchPage/SearchPage.test.js
@@ -1,17 +1,11 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import { SearchPageComponent } from './SearchPage';
 import reducer, { ADD_FILTER, addFilter, initialState } from './SearchPage.ducks';
-import { RoutesProvider } from '../../components';
-import routesConfiguration from '../../routesConfiguration';
 
 describe('SearchPageComponent', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(
-      <RoutesProvider routes={routesConfiguration}>
-        <SearchPageComponent onLoadListings={v => v} />
-      </RoutesProvider>,
-    );
+    const tree = renderShallow(<SearchPageComponent onLoadListings={v => v} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SecurityPage/SecurityPage.test.js b/src/containers/SecurityPage/SecurityPage.test.js
index 78a137c3..a8199842 100644
--- a/src/containers/SecurityPage/SecurityPage.test.js
+++ b/src/containers/SecurityPage/SecurityPage.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderShallow } from '../../util/test-helpers';
 import SecurityPage from './SecurityPage';
 
 describe('SecurityPage', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<SecurityPage />);
+    const tree = renderShallow(<SecurityPage />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/SignUpForm/SignUpForm.test.js b/src/containers/SignUpForm/SignUpForm.test.js
index accf8b1c..a901d213 100644
--- a/src/containers/SignUpForm/SignUpForm.test.js
+++ b/src/containers/SignUpForm/SignUpForm.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { renderTree } from '../../util/test-helpers';
+import { renderDeep } from '../../util/test-helpers';
 import SignUpForm from './SignUpForm';
 
 describe('SignUpForm', () => {
   it('matches snapshot', () => {
-    const tree = renderTree(<SignUpForm />);
+    const tree = renderDeep(<SignUpForm />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/util/test-helpers.js b/src/util/test-helpers.js
index 7d40dda4..5c1a6818 100644
--- a/src/util/test-helpers.js
+++ b/src/util/test-helpers.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router';
 import { Provider } from 'react-redux';
@@ -18,10 +20,14 @@ export const TestProvider = props => {
   );
 };
 
-export const renderTree = children => {
+export const renderShallow = component => {
+  return toJson(shallow(component));
+};
+
+export const renderDeep = component => {
   const comp = renderer.create(
     <TestProvider>
-      {children}
+      {component}
     </TestProvider>,
   );
   return comp.toJSON();

From 2b0238f151e95d1a3e2ec66af8875a6ec35e0353 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 7 Feb 2017 16:05:02 +0200
Subject: [PATCH 4/7] Update snapshots

---
 .../__snapshots__/FilterPanel.test.js.snap    |  29 +-
 .../__snapshots__/ListingCard.test.js.snap    |  65 ++---
 .../__snapshots__/MapPanel.test.js.snap       |  32 +--
 .../OrderDetailsPanel.test.js.snap            |  60 ++--
 .../SearchResultsPanel.test.js.snap           |  38 ++-
 .../__snapshots__/CheckoutPage.test.js.snap   | 150 ++--------
 .../ContactDetailsPage.test.js.snap           | 105 +------
 .../EditProfilePage.test.js.snap              | 105 +------
 .../__snapshots__/InboxPage.test.js.snap      | 120 +-------
 .../__snapshots__/LandingPage.test.js.snap    | 156 +---------
 .../__snapshots__/ListingPage.test.js.snap    | 207 +++-----------
 .../ManageListingsPage.test.js.snap           | 120 +-------
 .../__snapshots__/NotFoundPage.test.js.snap   | 120 +-------
 .../__snapshots__/OrderPage.test.js.snap      | 268 ++++--------------
 .../PasswordChangePage.test.js.snap           | 142 +---------
 .../PasswordForgottenPage.test.js.snap        | 132 +--------
 .../PayoutPreferencesPage.test.js.snap        | 105 +------
 .../__snapshots__/ProfilePage.test.js.snap    | 105 +------
 .../SalesConversationPage.test.js.snap        | 134 ++-------
 .../__snapshots__/SearchPage.test.js.snap     | 181 +-----------
 .../__snapshots__/SecurityPage.test.js.snap   | 158 +----------
 21 files changed, 311 insertions(+), 2221 deletions(-)

diff --git a/src/components/FilterPanel/__snapshots__/FilterPanel.test.js.snap b/src/components/FilterPanel/__snapshots__/FilterPanel.test.js.snap
index d941b9f6..1d195eeb 100644
--- a/src/components/FilterPanel/__snapshots__/FilterPanel.test.js.snap
+++ b/src/components/FilterPanel/__snapshots__/FilterPanel.test.js.snap
@@ -1,22 +1,23 @@
 exports[`FilterPanel matches snapshot 1`] = `
 <div>
-  <h1
-    className={undefined}>
+  <h1>
     Filters
   </h1>
-  <a
-    className=""
-    href="/s/listings"
-    onClick={[Function]}
-    style={Object {}}>
+  <NamedLink
+    hash=""
+    name="SearchListingsPage"
+    params={Object {}}
+    query={Object {}}
+    state={Object {}}>
     See studios
-  </a>
-  <a
-    className=""
-    href="/s/listings"
-    onClick={[Function]}
-    style={Object {}}>
+  </NamedLink>
+  <NamedLink
+    hash=""
+    name="SearchListingsPage"
+    params={Object {}}
+    query={Object {}}
+    state={Object {}}>
     X
-  </a>
+  </NamedLink>
 </div>
 `;
diff --git a/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap b/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap
index 2c06adbf..384050ab 100644
--- a/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap
+++ b/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap
@@ -1,44 +1,39 @@
 exports[`ListingCard matches snapshot 1`] = `
-<div
-  className={undefined}>
-  <div
-    className={undefined}>
-    <div
-      className={undefined}>
+<div>
+  <div>
+    <div>
       <img
         alt="Listing Title"
-        className={undefined}
         src="http://placehold.it/400x300" />
     </div>
   </div>
-  <div
-    className={undefined}>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/l/Banyan-Studios/123"
-        onClick={[Function]}
-        style={Object {}}>
+  <div>
+    <div>
+      <NamedLink
+        hash=""
+        name="ListingPage"
+        params={
+          Object {
+            "id": 123,
+            "slug": "Banyan-Studios",
+          }
+        }
+        query={Object {}}
+        state={Object {}}>
         Banyan Studios
-      </a>
-      <div
-        className={undefined}>
+      </NamedLink>
+      <div>
         55€ / day
       </div>
     </div>
-    <div
-      className={undefined}>
+    <div>
       Organic Music Production in a Sustainable, Ethical and Professional Studio.
     </div>
-    <div
-      className={undefined}>
-      <div
-        className={undefined}>
+    <div>
+      <div>
         New York, NY • 40mi away
       </div>
-      <div
-        className={undefined}>
+      <div>
         (
         <span>
           4
@@ -54,23 +49,17 @@ exports[`ListingCard matches snapshot 1`] = `
       </div>
     </div>
     <hr />
-    <div
-      className={undefined}>
-      <div
-        className={undefined}>
+    <div>
+      <div>
         <img
           alt="The Stardust Collective"
-          className={undefined}
           src="http://placehold.it/44x44" />
       </div>
-      <div
-        className={undefined}>
-        <span
-          className={undefined}>
+      <div>
+        <span>
           The Stardust Collective
         </span>
-        <div
-          className={undefined}>
+        <div>
           review: 
           <span>
             4
diff --git a/src/components/MapPanel/__snapshots__/MapPanel.test.js.snap b/src/components/MapPanel/__snapshots__/MapPanel.test.js.snap
index 8b5b9f82..f155b0fe 100644
--- a/src/components/MapPanel/__snapshots__/MapPanel.test.js.snap
+++ b/src/components/MapPanel/__snapshots__/MapPanel.test.js.snap
@@ -1,24 +1,24 @@
 exports[`MapPanel matches snapshot 1`] = `
 <div>
-  <div
-    className={undefined}>
+  <div>
     Map
   </div>
-  <div
-    className={undefined} />
-  <a
-    className=""
-    href="/s/filters"
-    onClick={[Function]}
-    style={Object {}}>
+  <div />
+  <NamedLink
+    hash=""
+    name="SearchFiltersPage"
+    params={Object {}}
+    query={Object {}}
+    state={Object {}}>
     Filters
-  </a>
-  <a
-    className=""
-    href="/s/listings"
-    onClick={[Function]}
-    style={Object {}}>
+  </NamedLink>
+  <NamedLink
+    hash=""
+    name="SearchListingsPage"
+    params={Object {}}
+    query={Object {}}
+    state={Object {}}>
     X
-  </a>
+  </NamedLink>
 </div>
 `;
diff --git a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
index 5cff1983..d3239ea5 100644
--- a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
+++ b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
@@ -12,53 +12,33 @@ exports[`OrderDetailsPanel matches snapshot 1`] = `
   <h3>
     Test order
   </h3>
-  <div>
-    <p>
-      Some road 1
-    </p>
-    <p>
-      Some city, somewhere
-    </p>
-    <p>
-      Some phone number
-    </p>
-    <p>
-      Get directions
-    </p>
-  </div>
+  <ContactInfo
+    addressLine1="Some road 1"
+    addressLine2="Some city, somewhere"
+    phoneNumber="Some phone number" />
   <p>
     Confirmation code 
     some-test-confirmation-code
   </p>
-  <dl>
-    <dt>
-      Price per day:
-    </dt>
-    <dd>
-      10$
-    </dd>
-    <dt>
-      Booking period:
-    </dt>
-    <dd>
-      some booking period, some booking duration
-    </dd>
-    <dt>
-      Total
-    </dt>
-    <dd>
-      100$
-    </dd>
-  </dl>
+  <BookingInfo
+    bookingDuration="some booking duration"
+    bookingPeriod="some booking period"
+    pricePerDay="10$"
+    total="100$" />
   <p>
     Cancel booking
   </p>
-  <a
-    className=""
-    href="/order/some-test-order-id/discussion"
-    onClick={[Function]}
-    style={Object {}}>
+  <NamedLink
+    hash=""
+    name="OrderDiscussionPage"
+    params={
+      Object {
+        "id": "some-test-order-id",
+      }
+    }
+    query={Object {}}
+    state={Object {}}>
     You have a new message!
-  </a>
+  </NamedLink>
 </div>
 `;
diff --git a/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap b/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap
index a93c2baa..c29b02f6 100644
--- a/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap
+++ b/src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap
@@ -1,29 +1,23 @@
 exports[`SearchResultsPanel matches snapshot 1`] = `
 <div>
-  <div
-    className={undefined}>
-    New York, Jan 2nd – Jan 4th 
-    <span
-      className={undefined}>
-      ▼
-    </span>
-  </div>
-  <div
-    className={undefined}>
-    <a
-      className=""
-      href="/s/filters"
-      onClick={[Function]}
-      style={Object {}}>
+  <Menu />
+  <div>
+    <NamedLink
+      hash=""
+      name="SearchFiltersPage"
+      params={Object {}}
+      query={Object {}}
+      state={Object {}}>
       Filters
-    </a>
-    <a
-      className=""
-      href="/s/map"
-      onClick={[Function]}
-      style={Object {}}>
+    </NamedLink>
+    <NamedLink
+      hash=""
+      name="SearchMapPage"
+      params={Object {}}
+      query={Object {}}
+      state={Object {}}>
       Map
-    </a>
+    </NamedLink>
   </div>
 </div>
 `;
diff --git a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap
index 45e41e39..6bf1f3bc 100644
--- a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap
+++ b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap
@@ -1,106 +1,6 @@
 exports[`CheckoutPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Book Banyan Studios (some-listing-id)
-  </h1>
+<Connect(PageLayout)
+  title="Book Banyan Studios (some-listing-id)">
   <img
     alt="Banyan Studios"
     src="http://placehold.it/750x470"
@@ -109,35 +9,27 @@ exports[`CheckoutPage matches snapshot 1`] = `
         "width": "100%",
       }
     } />
-  <dl>
-    <dt>
-      Price per day:
-    </dt>
-    <dd>
-      55€
-    </dd>
-    <dt>
-      Booking period:
-    </dt>
-    <dd>
-      Jan 2nd - Jan 4th, 3 days
-    </dd>
-    <dt>
-      Total
-    </dt>
-    <dd>
-      165€
-    </dd>
-  </dl>
+  <BookingInfo
+    bookingDuration="3 days"
+    bookingPeriod="Jan 2nd - Jan 4th"
+    imageUrl="http://placehold.it/750x470"
+    pricePerDay="55€"
+    title="Banyan Studios"
+    total="165€" />
   <p>
     By confirming I accept the booking terms and conditions.
   </p>
-  <a
-    className=""
-    href="/order/12345/details"
-    onClick={[Function]}
-    style={Object {}}>
+  <NamedLink
+    hash=""
+    name="OrderDetailsPage"
+    params={
+      Object {
+        "id": 12345,
+      }
+    }
+    query={Object {}}
+    state={Object {}}>
     Confirm & Pay
-  </a>
-</div>
+  </NamedLink>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/ContactDetailsPage/__snapshots__/ContactDetailsPage.test.js.snap b/src/containers/ContactDetailsPage/__snapshots__/ContactDetailsPage.test.js.snap
index d46d6db5..0fa3d720 100644
--- a/src/containers/ContactDetailsPage/__snapshots__/ContactDetailsPage.test.js.snap
+++ b/src/containers/ContactDetailsPage/__snapshots__/ContactDetailsPage.test.js.snap
@@ -1,105 +1,4 @@
 exports[`ContactDetailsPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Contact details
-  </h1>
-</div>
+<Connect(PageLayout)
+  title="Contact details" />
 `;
diff --git a/src/containers/EditProfilePage/__snapshots__/EditProfilePage.test.js.snap b/src/containers/EditProfilePage/__snapshots__/EditProfilePage.test.js.snap
index edcb6b76..d10c8eae 100644
--- a/src/containers/EditProfilePage/__snapshots__/EditProfilePage.test.js.snap
+++ b/src/containers/EditProfilePage/__snapshots__/EditProfilePage.test.js.snap
@@ -1,105 +1,4 @@
 exports[`EditProfilePage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Edit profile page with display name: my-shop
-  </h1>
-</div>
+<Connect(PageLayout)
+  title="Edit profile page with display name: my-shop" />
 `;
diff --git a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
index 43f4f97c..fa8ea0b1 100644
--- a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
+++ b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
@@ -1,116 +1,20 @@
 exports[`InboxPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    inbox page
-  </h1>
+<Connect(PageLayout)
+  title="inbox page">
   <ul>
     <li>
-      <a
+      <Link
+        activeClassName=""
+        activeOnlyWhenExact={false}
+        activeStyle={Object {}}
         className=""
-        href="/conversation/1234"
-        onClick={[Function]}
-        style={Object {}}>
+        isActive={[Function]}
+        replace={false}
+        style={Object {}}
+        to="/conversation/1234">
         Single thread
-      </a>
+      </Link>
     </li>
   </ul>
-</div>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap
index 4d483c64..c6cc2602 100644
--- a/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap
+++ b/src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap
@@ -1,151 +1,9 @@
 exports[`LandingPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Landing page
-  </h1>
-  <section
-    className={undefined}>
-    <div
-      className={undefined}>
-      <div
-        className={undefined}>
-        <div
-          className={undefined}>
-          <span>
-            Book Studiotime anywhere
-          </span>
-        </div>
-        <div
-          className={undefined}>
-          <span>
-            The largest online community to rent music studios
-          </span>
-        </div>
-      </div>
-      <div
-        className={undefined}>
-        <form
-          onSubmit={[Function]}>
-          <input
-            className={undefined}
-            name="location"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onDragStart={[Function]}
-            onDrop={[Function]}
-            onFocus={[Function]}
-            placeholder="Location search (soon)"
-            type="text"
-            value="" />
-          <button
-            className={undefined}
-            disabled={true}
-            type="submit">
-            <span>
-              Search
-            </span>
-          </button>
-        </form>
-      </div>
-    </div>
-  </section>
-</div>
+<Connect(PageLayout)
+  title="Landing page">
+  <HeroSection>
+    <ReduxForm
+      onSubmit={[Function]} />
+  </HeroSection>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 260122ed..615a80af 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -1,158 +1,42 @@
 exports[`ListingPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Banyan Studios 55€ / day
-  </h1>
-  <div
-    className={undefined}>
+<Connect(PageLayout)
+  title="Banyan Studios 55€ / day">
+  <div>
     <img
       alt="img1"
-      className={undefined}
       src="http://placehold.it/750x470" />
-    <div
-      className={undefined}>
-      <div
-        className={undefined}>
-        <div
-          className={undefined}>
+    <div>
+      <div>
+        <div>
           <img
             alt="img2"
-            className={undefined}
             src="http://placehold.it/750x470" />
         </div>
       </div>
-      <div
-        className={undefined}>
-        <div
-          className={undefined}>
+      <div>
+        <div>
           <img
             alt="img3"
-            className={undefined}
             src="http://placehold.it/750x470" />
         </div>
       </div>
-      <div
-        className={undefined}>
-        <div
-          className={undefined}>
+      <div>
+        <div>
           <img
             alt="img4"
-            className={undefined}
             src="http://placehold.it/750x470" />
         </div>
       </div>
-      <div
-        className={undefined}>
-        <div
-          className={undefined}>
+      <div>
+        <div>
           <img
             alt="img5"
-            className={undefined}
             src="http://placehold.it/750x470" />
         </div>
       </div>
     </div>
   </div>
   <div
-    className={undefined}
     dangerouslySetInnerHTML={
       Object {
         "__html": "
@@ -169,8 +53,7 @@ exports[`ListingPage matches snapshot 1`] = `
         ",
       }
     } />
-  <div
-    className={undefined}>
+  <div>
     <h1>
       Here will be filters (or dragons)
     </h1>
@@ -190,24 +73,25 @@ exports[`ListingPage matches snapshot 1`] = `
        10am - 6pm
     </p>
   </div>
-  <a
+  <Link
+    activeClassName=""
+    activeOnlyWhenExact={false}
+    activeStyle={Object {}}
     className=""
-    href="mailto:studio.dude@mystudio.com"
-    onClick={[Function]}
-    style={Object {}}>
+    isActive={[Function]}
+    replace={false}
+    style={Object {}}
+    to="mailto:studio.dude@mystudio.com">
     <h2>
       Contact studio
     </h2>
-  </a>
-  <div
-    className={undefined}>
+  </Link>
+  <div>
     <h2>
       Studio reviews (1)
     </h2>
-    <div
-      className={undefined}>
-      <div
-        className={undefined}>
+    <div>
+      <div>
         <p>
           
                   Great studio in the New York for music professionals. Everything you need
@@ -215,28 +99,21 @@ exports[`ListingPage matches snapshot 1`] = `
                   we even got some tips for our songs! :)
                   
         </p>
-        <div
-          className={undefined}>
-          <div
-            className={undefined}>
+        <div>
+          <div>
             <img
               alt="Vesa L."
-              className={undefined}
               src="http://placehold.it/44x44" />
           </div>
-          <div
-            className={undefined}>
-            <span
-              className={undefined}>
+          <div>
+            <span>
               Vesa L.
             </span>
-            <span
-              className={undefined}>
+            <span>
               January 2017
             </span>
           </div>
-          <div
-            className={undefined}>
+          <div>
             review: 
             <span>
               4
@@ -249,16 +126,20 @@ exports[`ListingPage matches snapshot 1`] = `
       </div>
     </div>
   </div>
-  <div
-    className={undefined}>
+  <div>
     Map
   </div>
-  <a
-    className=""
-    href="/order/12345/details"
-    onClick={[Function]}
-    style={Object {}}>
+  <NamedLink
+    hash=""
+    name="OrderDetailsPage"
+    params={
+      Object {
+        "id": 12345,
+      }
+    }
+    query={Object {}}
+    state={Object {}}>
     Book Banyan Studios
-  </a>
-</div>
+  </NamedLink>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap b/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap
index 6879e4cb..e025b8cd 100644
--- a/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap
+++ b/src/containers/ManageListingsPage/__snapshots__/ManageListingsPage.test.js.snap
@@ -1,116 +1,20 @@
 exports[`ManageListingsPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Manage listings
-  </h1>
+<Connect(PageLayout)
+  title="Manage listings">
   <ul>
     <li>
-      <a
+      <Link
+        activeClassName=""
+        activeOnlyWhenExact={false}
+        activeStyle={Object {}}
         className=""
-        href="/l/1234"
-        onClick={[Function]}
-        style={Object {}}>
+        isActive={[Function]}
+        replace={false}
+        style={Object {}}
+        to="/l/1234">
         Listing 1234
-      </a>
+      </Link>
     </li>
   </ul>
-</div>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
index 2c1e5015..9ecd3fdb 100644
--- a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
+++ b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
@@ -1,112 +1,16 @@
 exports[`NotFoundPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Page not found
-  </h1>
-  <a
+<Connect(PageLayout)
+  title="Page not found">
+  <Link
+    activeClassName=""
+    activeOnlyWhenExact={false}
+    activeStyle={Object {}}
     className=""
-    href="/"
-    onClick={[Function]}
-    style={Object {}}>
+    isActive={[Function]}
+    replace={false}
+    style={Object {}}
+    to="/">
     Index page
-  </a>
-</div>
+  </Link>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
index bd246ae3..d78b61fa 100644
--- a/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
+++ b/src/containers/OrderPage/__snapshots__/OrderPage.test.js.snap
@@ -1,219 +1,67 @@
 exports[`OrderPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Your Banyan Studios booking is confirmed!
-  </h1>
-  <a
-    className=""
-    href="/order/1234/details"
-    onClick={[Function]}
+<Connect(PageLayout)
+  title="Your Banyan Studios booking is confirmed!">
+  <NamedLink
+    activeStyle={
+      Object {
+        "fontWeight": "bold",
+      }
+    }
+    hash=""
+    name="OrderDetailsPage"
+    params={
+      Object {
+        "id": 1234,
+      }
+    }
+    query={Object {}}
+    state={Object {}}
     style={
       Object {
         "marginRight": "2rem",
       }
     }>
     Booking details
-  </a>
-  <a
-    className=""
-    href="/order/1234/discussion"
-    onClick={[Function]}
-    style={Object {}}>
+  </NamedLink>
+  <NamedLink
+    activeStyle={
+      Object {
+        "fontWeight": "bold",
+      }
+    }
+    hash=""
+    name="OrderDiscussionPage"
+    params={
+      Object {
+        "id": 1234,
+      }
+    }
+    query={Object {}}
+    state={Object {}}>
     Discussion
-  </a>
-  <div
-    className="undefined">
-    <img
-      alt="Banyan Studios"
-      src="http://placehold.it/750x470"
-      style={
-        Object {
-          "width": "100%",
-        }
-      } />
-    <h3>
-      Banyan Studios
-    </h3>
-    <div>
-      <p>
-        350 5th Avenue
-      </p>
-      <p>
-        New York, NY 10118
-      </p>
-      <p>
-        +1 432 43184910
-      </p>
-      <p>
-        Get directions
-      </p>
-    </div>
-    <p>
-      Confirmation code 
-      X2587X
-    </p>
-    <dl>
-      <dt>
-        Price per day:
-      </dt>
-      <dd>
-        55€
-      </dd>
-      <dt>
-        Booking period:
-      </dt>
-      <dd>
-        Jan 2nd - Jan 4th, 3 days
-      </dd>
-      <dt>
-        Total
-      </dt>
-      <dd>
-        165€
-      </dd>
-    </dl>
-    <p>
-      Cancel booking
-    </p>
-    <a
-      className=""
-      href="/order/1234/discussion"
-      onClick={[Function]}
-      style={Object {}}>
-      You have a new message!
-    </a>
-  </div>
-  <div
-    className="">
-    <ul>
-      <li>
-        <span
-          className={undefined}>
-          2017-02-26T00:00:00.000Z
-        </span>
-        <div
-          className={undefined}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac tellus ornare, tempor lacus quis, imperdiet lectus. Morbi suscipit semper nisl at lacinia. Vestibulum malesuada mattis nisl, et venenatis enim volutpat sit amet. Nulla laoreet feugiat gravida. Fusce ultricies nisl quis aliquet ullamcorper. Nulla congue risus metus.
-        </div>
-        <span
-          className={undefined}>
-          John
-        </span>
-      </li>
-    </ul>
-    <form
-      className={undefined}
-      onSubmit={[Function]}>
-      <input
-        autoFocus={true}
-        className={undefined}
-        onChange={[Function]}
-        type="text"
-        value="" />
-      <button
-        className={undefined}
-        type="submit">
-        Send
-      </button>
-    </form>
-  </div>
-</div>
+  </NamedLink>
+  <OrderDetailsPanel
+    className="undefined"
+    confirmationCode="X2587X"
+    contact={
+      Object {
+        "addressLine1": "350 5th Avenue",
+        "addressLine2": "New York, NY 10118",
+        "phoneNumber": "+1 432 43184910",
+      }
+    }
+    imageUrl="http://placehold.it/750x470"
+    info={
+      Object {
+        "bookingDuration": "3 days",
+        "bookingPeriod": "Jan 2nd - Jan 4th",
+        "pricePerDay": "55€",
+        "total": "165€",
+      }
+    }
+    orderId={1234}
+    title="Banyan Studios" />
+  <OrderDiscussionPanel
+    className="" />
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap b/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap
index c62e23cb..5d29a43e 100644
--- a/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap
+++ b/src/containers/PasswordChangePage/__snapshots__/PasswordChangePage.test.js.snap
@@ -1,139 +1,7 @@
 exports[`PasswordChangePage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Type new password
-  </h1>
-  <form
-    onSubmit={[Function]}>
-    <label
-      htmlFor="newPassword1">
-      New password
-    </label>
-    <input
-      name="newPassword1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="password"
-      value="" />
-    <label
-      htmlFor="newPassword2">
-      New password, again
-    </label>
-    <input
-      name="newPassword2"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="password"
-      value="" />
-    <button
-      disabled={true}
-      type="submit">
-      Change password
-    </button>
-  </form>
-</div>
+<Connect(PageLayout)
+  title="Type new password">
+  <ReduxForm
+    onSubmit={[Function]} />
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap b/src/containers/PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap
index 1abd2993..ade81882 100644
--- a/src/containers/PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap
+++ b/src/containers/PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap
@@ -1,129 +1,7 @@
 exports[`PasswordForgottenPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Request new password
-  </h1>
-  <form
-    onSubmit={[Function]}>
-    <label
-      htmlFor="email">
-      Email
-    </label>
-    <input
-      name="email"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="email"
-      value="" />
-    <p>
-      We will send you instructions to your email.
-    </p>
-    <button
-      disabled={true}
-      type="submit">
-      Send
-    </button>
-  </form>
-</div>
+<Connect(PageLayout)
+  title="Request new password">
+  <ReduxForm
+    onSubmit={[Function]} />
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap b/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
index b70f933d..51a5a9aa 100644
--- a/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
+++ b/src/containers/PayoutPreferencesPage/__snapshots__/PayoutPreferencesPage.test.js.snap
@@ -1,105 +1,4 @@
 exports[`PayoutPreferencesPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Payout preferences
-  </h1>
-</div>
+<Connect(PageLayout)
+  title="Payout preferences" />
 `;
diff --git a/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap b/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap
index 5b747f1f..21bf0730 100644
--- a/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap
+++ b/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap
@@ -1,105 +1,4 @@
 exports[`ProfilePage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Profile page with display name: most-awesome-shop
-  </h1>
-</div>
+<Connect(PageLayout)
+  title="Profile page with display name: most-awesome-shop" />
 `;
diff --git a/src/containers/SalesConversationPage/__snapshots__/SalesConversationPage.test.js.snap b/src/containers/SalesConversationPage/__snapshots__/SalesConversationPage.test.js.snap
index f5d72a41..6b7adf52 100644
--- a/src/containers/SalesConversationPage/__snapshots__/SalesConversationPage.test.js.snap
+++ b/src/containers/SalesConversationPage/__snapshots__/SalesConversationPage.test.js.snap
@@ -1,125 +1,33 @@
 exports[`SalesConversationPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Sales conversation page
-  </h1>
+<Connect(PageLayout)
+  title="Sales conversation page">
   <p>
     Sale id: 
     12345
   </p>
-  <a
+  <Link
+    activeClassName=""
+    activeOnlyWhenExact={false}
+    activeStyle={Object {}}
     className=""
-    href="/sale/12345/discussion"
-    onClick={[Function]}
-    style={Object {}}>
+    isActive={[Function]}
+    replace={false}
+    style={Object {}}
+    to="/sale/12345/discussion">
     Discussion tab
-  </a>
+  </Link>
   <br />
-  <a
+  <Link
+    activeClassName=""
+    activeOnlyWhenExact={false}
+    activeStyle={Object {}}
     className=""
-    href="/sale/12345/details"
-    onClick={[Function]}
-    style={Object {}}>
+    isActive={[Function]}
+    replace={false}
+    style={Object {}}
+    to="/sale/12345/details">
     Details tab
-  </a>
+  </Link>
   <p>
     Mobile layout needs different views for discussion and details.
   </p>
@@ -130,5 +38,5 @@ exports[`SalesConversationPage matches snapshot 1`] = `
     </i>
     )
   </p>
-</div>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
index 4d3acc7e..35c35cbf 100644
--- a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
+++ b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
@@ -1,186 +1,19 @@
 exports[`SearchPageComponent matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Search page
-  </h1>
-  <div
-    className={undefined}>
+<Connect(PageLayout)
+  title="Search page">
+  <div>
     <div
       className="">
-      <div>
-        <h1
-          className={undefined}>
-          Filters
-        </h1>
-        <a
-          className=""
-          href="/s/listings"
-          onClick={[Function]}
-          style={Object {}}>
-          See studios
-        </a>
-        <a
-          className=""
-          href="/s/listings"
-          onClick={[Function]}
-          style={Object {}}>
-          X
-        </a>
-      </div>
+      <FilterPanel />
     </div>
     <div
       className="undefined">
-      <div>
-        <div
-          className={undefined}>
-          New York, Jan 2nd – Jan 4th 
-          <span
-            className={undefined}>
-            ▼
-          </span>
-        </div>
-        <div
-          className={undefined}>
-          <a
-            className=""
-            href="/s/filters"
-            onClick={[Function]}
-            style={Object {}}>
-            Filters
-          </a>
-          <a
-            className=""
-            href="/s/map"
-            onClick={[Function]}
-            style={Object {}}>
-            Map
-          </a>
-        </div>
-      </div>
+      <SearchResultsPanel />
     </div>
     <div
       className="">
-      <div>
-        <div
-          className={undefined}>
-          Map
-        </div>
-        <div
-          className={undefined} />
-        <a
-          className=""
-          href="/s/filters"
-          onClick={[Function]}
-          style={Object {}}>
-          Filters
-        </a>
-        <a
-          className=""
-          href="/s/listings"
-          onClick={[Function]}
-          style={Object {}}>
-          X
-        </a>
-      </div>
+      <MapPanel />
     </div>
   </div>
-</div>
+</Connect(PageLayout)>
 `;
diff --git a/src/containers/SecurityPage/__snapshots__/SecurityPage.test.js.snap b/src/containers/SecurityPage/__snapshots__/SecurityPage.test.js.snap
index 86c1c763..47abb137 100644
--- a/src/containers/SecurityPage/__snapshots__/SecurityPage.test.js.snap
+++ b/src/containers/SecurityPage/__snapshots__/SecurityPage.test.js.snap
@@ -1,155 +1,7 @@
 exports[`SecurityPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Security
-  </h1>
-  <form
-    onSubmit={[Function]}>
-    <label
-      htmlFor="newPassword1">
-      New password
-    </label>
-    <input
-      name="newPassword1"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="password"
-      value="" />
-    <label
-      htmlFor="newPassword2">
-      New password, again
-    </label>
-    <input
-      name="newPassword2"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="password"
-      value="" />
-    <label
-      htmlFor="password">
-      Current password
-    </label>
-    <input
-      name="password"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="password"
-      value="" />
-    <p>
-      Delete account (module)
-    </p>
-    <button
-      disabled={true}
-      type="submit">
-      Save changes
-    </button>
-  </form>
-</div>
+<Connect(PageLayout)
+  title="Security">
+  <ReduxForm
+    onSubmit={[Function]} />
+</Connect(PageLayout)>
 `;

From 073cf0bd9cea2f3f4afd55e2df22f7056149153f Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 7 Feb 2017 16:08:37 +0200
Subject: [PATCH 5/7] Export AuthenticationPageComponent for snapshot test

---
 .../AuthenticationPage/AuthenticationPage.js  |  12 +-
 .../AuthenticationPage.test.js                |  12 +-
 .../AuthenticationPage.test.js.snap           | 192 ++----------------
 3 files changed, 39 insertions(+), 177 deletions(-)

diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js
index 6fb5336e..6cf598f2 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.js
+++ b/src/containers/AuthenticationPage/AuthenticationPage.js
@@ -5,7 +5,7 @@ import { PageLayout } from '../../components';
 import { LoginForm, SignUpForm } from '../../containers';
 import { login } from '../../ducks/Auth.ducks';
 
-const AuthenticationPage = props => {
+export const AuthenticationPageComponent = props => {
   const { location, tab, isAuthenticated, onLoginSubmit, onSignUpSubmit } = props;
   const isLogin = tab === 'login';
   const from = location.state && location.state.from ? location.state.from : null;
@@ -28,11 +28,11 @@ const AuthenticationPage = props => {
   );
 };
 
-AuthenticationPage.defaultProps = { location: {}, tab: 'signup' };
+AuthenticationPageComponent.defaultProps = { location: {}, tab: 'signup' };
 
 const { any, oneOf, shape, bool, func } = PropTypes;
 
-AuthenticationPage.propTypes = {
+AuthenticationPageComponent.propTypes = {
   location: shape({ state: shape({ from: any }) }),
   tab: oneOf(['login', 'signup']),
   isAuthenticated: bool.isRequired,
@@ -47,4 +47,8 @@ const mapDispatchToProps = dispatch => ({
   onSignUpSubmit: ({ email, password }) => dispatch(login(email, password)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(AuthenticationPage);
+const AuthenticationPage = connect(mapStateToProps, mapDispatchToProps)(
+  AuthenticationPageComponent,
+);
+
+export default AuthenticationPage;
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.test.js b/src/containers/AuthenticationPage/AuthenticationPage.test.js
index 88b4b079..9173acca 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.test.js
+++ b/src/containers/AuthenticationPage/AuthenticationPage.test.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
-import AuthenticationPage from './AuthenticationPage';
+import { AuthenticationPageComponent } from './AuthenticationPage';
 
-describe('AuthenticationPage', () => {
+describe('AuthenticationPageComponent', () => {
   it('matches snapshot', () => {
-    const tree = renderShallow(<AuthenticationPage location={{ state: { from: '/protected' } }} />);
+    const props = {
+      location: { state: { from: '/protected' } },
+      isAuthenticated: false,
+      onLoginSubmit: () => null,
+      onSignUpSubmit: () => null,
+    };
+    const tree = renderShallow(<AuthenticationPageComponent {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap b/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap
index 1e077aae..03b97434 100644
--- a/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap
+++ b/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap
@@ -1,173 +1,25 @@
-exports[`AuthenticationPage matches snapshot 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className=""
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "&#127968;",
-          }
-        }
-        href="/"
-        onClick={[Function]}
-        style={Object {}} />
-      <select
-        className={undefined}
-        onChange={[Function]}
-        value="default">
-        <option
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127828;",
-            }
-          }
-          value="default" />
-        <option
-          value="/s">
-          Search
-        </option>
-        <option
-          value="/l/Bike-Pelago/12345">
-          Listing page
-        </option>
-        <option
-          value="/u/Bikerrs">
-          Profile
-        </option>
-        <option
-          value="/u/Bikerrs/edit">
-          Edit profile
-        </option>
-        <option
-          value="/checkout/lid1234">
-          Checkout
-        </option>
-        <option
-          value="/inbox">
-          Inbox
-        </option>
-        <option
-          value="/orders">
-          Orders
-        </option>
-        <option
-          value="/sales">
-          Sales
-        </option>
-        <option
-          value="/password/forgotten">
-          Request password
-        </option>
-        <option
-          value="/password/change">
-          Change password
-        </option>
-        <option
-          value="/listings">
-          Manage listings
-        </option>
-        <option
-          value="/account">
-          Account settings
-        </option>
-        <option
-          value="/account/contact-details">
-          Contact details
-        </option>
-        <option
-          value="/account/payout-preferences">
-          Payout preferences
-        </option>
-        <option
-          value="/account/security">
-          Security
-        </option>
-      </select>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <h1>
-    Authentication page: signup tab
-  </h1>
-  <form
-    onSubmit={[Function]}>
-    <label
-      htmlFor="email">
-      Email
-    </label>
-    <input
-      name="email"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="email"
-      value="" />
-    <label
-      htmlFor="firstName">
-      First name
-    </label>
-    <input
-      name="firstName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      value="" />
-    <label
-      htmlFor="lastName">
-      Last name
-    </label>
-    <input
-      name="lastName"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      value="" />
-    <label
-      htmlFor="password">
-      Password
-    </label>
-    <input
-      name="password"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onDragStart={[Function]}
-      onDrop={[Function]}
-      onFocus={[Function]}
-      type="password"
-      value="" />
-    <p>
-      By confirming I accept the booking terms and conditions.
-    </p>
-    <button
-      disabled={true}
-      type="submit">
-      Sign up
-    </button>
-  </form>
-  <a
+exports[`AuthenticationPageComponent matches snapshot 1`] = `
+<Connect(PageLayout)
+  title="Authentication page: signup tab">
+  <ReduxForm
+    onSubmit={[Function]} />
+  <Link
+    activeClassName=""
+    activeOnlyWhenExact={false}
+    activeStyle={Object {}}
     className=""
-    href="/login"
-    onClick={[Function]}
-    style={Object {}}>
+    isActive={[Function]}
+    replace={false}
+    style={Object {}}
+    to={
+      Object {
+        "pathname": "/login",
+        "state": Object {
+          "from": "/protected",
+        },
+      }
+    }>
     Log in
-  </a>
-</div>
+  </Link>
+</Connect(PageLayout)>
 `;

From 8f92ec2855e549c901fa167f1a83f43657d75cf8 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 7 Feb 2017 16:14:28 +0200
Subject: [PATCH 6/7] Use render helper in tests

---
 src/components/NamedLink/NamedLink.test.js    | 21 +++++++------------
 .../RouterProvider/RouterProvider.test.js     |  8 +++----
 .../RoutesProvider/RoutesProvider.test.js     |  8 +++----
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/components/NamedLink/NamedLink.test.js b/src/components/NamedLink/NamedLink.test.js
index 67a46ad4..2d5d9aa6 100644
--- a/src/components/NamedLink/NamedLink.test.js
+++ b/src/components/NamedLink/NamedLink.test.js
@@ -1,9 +1,7 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router';
 import { RoutesProvider } from '../index';
-import Routes from '../../Routes';
+import { renderDeep } from '../../util/test-helpers';
 import NamedLink from './NamedLink';
-import renderer from 'react-test-renderer';
 
 describe('NamedLink', () => {
   it('should contain correct link', () => {
@@ -11,16 +9,13 @@ describe('NamedLink', () => {
     const routesConf = [
       { pattern: '/somepage/:id', name: 'SomePage', component: () => <div>blaa</div> },
     ];
-    const component = renderer.create(
-      <BrowserRouter>
-        <RoutesProvider routes={routesConf}>
-          <NamedLink name="SomePage" params={{ id }}>to SomePage</NamedLink>
-        </RoutesProvider>
-      </BrowserRouter>,
+    const tree = renderDeep(
+      <RoutesProvider routes={routesConf}>
+        <NamedLink name="SomePage" params={{ id }}>to SomePage</NamedLink>
+      </RoutesProvider>,
     );
-    const json = component.toJSON();
-    expect(json.type).toEqual('a');
-    expect(json.props.href).toEqual(`/somepage/${id}`);
-    expect(json.children).toEqual(['to SomePage']);
+    expect(tree.type).toEqual('a');
+    expect(tree.props.href).toEqual(`/somepage/${id}`);
+    expect(tree.children).toEqual(['to SomePage']);
   });
 });
diff --git a/src/components/RouterProvider/RouterProvider.test.js b/src/components/RouterProvider/RouterProvider.test.js
index 49703700..a03e6fe5 100644
--- a/src/components/RouterProvider/RouterProvider.test.js
+++ b/src/components/RouterProvider/RouterProvider.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
+import { renderDeep } from '../../util/test-helpers';
 import RouterProvider from './RouterProvider';
-import renderer from 'react-test-renderer';
 
 describe('RouterProvider', () => {
   it('should contain routes from context', () => {
@@ -10,9 +10,7 @@ describe('RouterProvider', () => {
     };
     Child.contextTypes = { router: React.PropTypes.object };
 
-    const rendered = renderer
-      .create(<RouterProvider router={router}><Child /></RouterProvider>)
-      .toJSON();
-    expect(rendered.children).toContain('router in context');
+    const tree = renderDeep(<RouterProvider router={router}><Child /></RouterProvider>);
+    expect(tree.children).toContain('router in context');
   });
 });
diff --git a/src/components/RoutesProvider/RoutesProvider.test.js b/src/components/RoutesProvider/RoutesProvider.test.js
index a274af4f..ea936d99 100644
--- a/src/components/RoutesProvider/RoutesProvider.test.js
+++ b/src/components/RoutesProvider/RoutesProvider.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
+import { renderDeep } from '../../util/test-helpers';
 import RoutesProvider from './RoutesProvider';
-import renderer from 'react-test-renderer';
 
 describe('RoutesProvider', () => {
   it('should contain routes from context', () => {
@@ -10,9 +10,7 @@ describe('RoutesProvider', () => {
     };
     Child.contextTypes = { routes: React.PropTypes.array };
 
-    const rendered = renderer
-      .create(<RoutesProvider routes={routesConf}><Child /></RoutesProvider>)
-      .toJSON();
-    expect(rendered.children).toContain('SomePage');
+    const tree = renderDeep(<RoutesProvider routes={routesConf}><Child /></RoutesProvider>);
+    expect(tree.children).toContain('SomePage');
   });
 });

From cfbeb8672ccfe1b2faddef06134be41735a9c392 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 7 Feb 2017 16:20:39 +0200
Subject: [PATCH 7/7] Document test helpers

---
 src/util/test-helpers.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/util/test-helpers.js b/src/util/test-helpers.js
index 5c1a6818..f313d436 100644
--- a/src/util/test-helpers.js
+++ b/src/util/test-helpers.js
@@ -7,6 +7,8 @@ import { BrowserRouter } from 'react-router';
 import { Provider } from 'react-redux';
 import configureStore from '../store';
 
+// Provide all the context for components that connect to the Redux
+// store, i18n, router, etc.
 export const TestProvider = props => {
   const store = configureStore();
   return (
@@ -20,10 +22,22 @@ export const TestProvider = props => {
   );
 };
 
+// Use Enzyme's shallow rendering to render the given component to a
+// JSON structure that can be used in snapshot tests. This doesn't
+// render the children within the given component, only a
+// representation of the child component and its props.
+//
+// Useful for snapshot testing components that contain shared
+// components. With deep rendering, if the child component changes
+// internally, the test for the given component would also fail. This
+// avoids the problem by not rendering the full tree but only the
+// relevant structure for the given component.
 export const renderShallow = component => {
   return toJson(shallow(component));
 };
 
+// Fully render the given component to a JSON structure that can be
+// used in snapshot tests.
 export const renderDeep = component => {
   const comp = renderer.create(
     <TestProvider>