Upgrade to enzyme 3

Use identity-obj-proxy to get class names in snapshots.

package.json

@@ -30,9 +30,11 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "css-loader": "^0.28.4",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-15": "^1.0.5",
     "faker": "^4.1.0",
     "file-loader": "^1.1.5",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^21.2.1",
     "node-sass": "^4.5.3",
     "react-styleguidist": "^6.0.8",
@@ -45,8 +47,9 @@
   },
   "jest": {
     "moduleNameMapper": {
-      "\\.s?css$": "<rootDir>/test/setup/styleMock.js"
+      "\\.s?css$": "identity-obj-proxy"
     },
+    "setupTestFrameworkScriptFile": "<rootDir>/test/setup/enzyme.js",
     "transform": {
       "\\.js$": "<rootDir>/test/config/transform.js"
     }
@@ -58,9 +61,9 @@
     "lint": "eslint src",
     "prebuild": "npm run clean && npm run lint",
     "build": "webpack --progress --profile",
-    "test": "NODE_ENV=test jest",
-    "test:watch": "NODE_ENV=test jest --watch",
-    "test:cover": "NODE_ENV=test jest --coverage",
-    "test:u": "NODE_ENV=test jest --updateSnapshot"
+    "test": "jest",
+    "test:watch": "npm test -- --watch",
+    "test:cover": "npm test -- --coverage",
+    "test:u": "npm test -- --updateSnapshot"
   }
 }

test/RadioGroup.test.js

@@ -56,7 +56,7 @@ describe('Radio Group', () => {
   })
 
   test('Radios get the correct props', () => {
-    const radioComps = radios.getNodes()
+    const radioComps = radios.getElements()
     let i = 0
 
     while (i < props.options.length) {
@@ -74,7 +74,7 @@ describe('Radio Group', () => {
 
   test('Value should match the checked radio button', () => {
     // With no radio button selected
-    const radioComps = radios.getNodes()
+    const radioComps = radios.getElements()
     let i = 0
 
     while (i < props.options.length) {
@@ -92,7 +92,7 @@ describe('Radio Group', () => {
 
     const newWrapper = shallow(<RadioGroup {...newProps} />)
     const newRadios = newWrapper.find(Radio)
-    const newRadioComps = newRadios.getNodes()
+    const newRadioComps = newRadios.getElements()
 
     i = 0
 

test/__snapshots__/AppBar.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`AppBar Snapshot 1`] = `
 <div
-  className={undefined}
+  className="root"
 >
   <a
-    className=""
+    className="link logo"
     href="some link"
     onClick={[Function]}
   >
@@ -13,10 +13,10 @@ exports[`AppBar Snapshot 1`] = `
   </a>
   <div>
     <span
-      className={undefined}
+      className="item"
     >
       <span
-        className={undefined}
+        className="root"
       >
         <svg
           height={16}
@@ -45,13 +45,13 @@ exports[`AppBar Snapshot 1`] = `
         </svg>
       </span>
       <span
-        className={undefined}
+        className="username"
       >
         some name
       </span>
     </span>
     <a
-      className=""
+      className="item link"
       href="logout link"
       onClick={[Function]}
     >

test/__snapshots__/Menu.test.js.snap

@@ -2,16 +2,16 @@
 
 exports[`Menu Snapshot 1`] = `
 <div
-  className=""
+  className="root"
 >
   <div
-    className={undefined}
+    className="main"
   >
     <div
-      className={undefined}
+      className="openerContainer"
     >
       <button
-        className={undefined}
+        className="opener"
         onClick={[Function]}
         type="button"
       >
@@ -19,14 +19,14 @@ exports[`Menu Snapshot 1`] = `
           Foo
         </span>
         <span
-          className={undefined}
+          className="arrow"
         >
           ▼
         </span>
       </button>
     </div>
     <div
-      className={undefined}
+      className="optionsContainer"
     />
   </div>
 </div>

test/__snapshots__/Radio.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Radio Snapshot 1`] = `
 <label
-  className=""
+  className="root"
   style={
     Object {
       "color": "black",
@@ -11,7 +11,7 @@ exports[`Radio Snapshot 1`] = `
 >
   <input
     checked={false}
-    className={undefined}
+    className="input"
     name="TestName"
     onChange={undefined}
     required={true}
@@ -19,7 +19,7 @@ exports[`Radio Snapshot 1`] = `
     value="TestValue"
   />
   <span
-    className={undefined}
+    className="pseudoInput"
     style={
       Object {
         "background": "transparent",
@@ -29,7 +29,7 @@ exports[`Radio Snapshot 1`] = `
      
   </span>
   <span
-    className={undefined}
+    className="label"
   >
     TestLabel
   </span>

test/__snapshots__/RadioGroup.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Radio Group Snapshot 1`] = `
 <div>
   <label
-    className=""
+    className="root"
     style={
       Object {
         "color": "black",
@@ -12,7 +12,7 @@ exports[`Radio Group Snapshot 1`] = `
   >
     <input
       checked={false}
-      className={undefined}
+      className="input"
       name="TestName"
       onChange={[Function]}
       required={true}
@@ -20,7 +20,7 @@ exports[`Radio Group Snapshot 1`] = `
       value="yes"
     />
     <span
-      className={undefined}
+      className="pseudoInput"
       style={
         Object {
           "background": "transparent",
@@ -30,13 +30,13 @@ exports[`Radio Group Snapshot 1`] = `
        
     </span>
     <span
-      className={undefined}
+      className="label"
     >
       Yes
     </span>
   </label>
   <label
-    className=""
+    className="root"
     style={
       Object {
         "color": "black",
@@ -45,7 +45,7 @@ exports[`Radio Group Snapshot 1`] = `
   >
     <input
       checked={false}
-      className={undefined}
+      className="input"
       name="TestName"
       onChange={[Function]}
       required={true}
@@ -53,7 +53,7 @@ exports[`Radio Group Snapshot 1`] = `
       value="no"
     />
     <span
-      className={undefined}
+      className="pseudoInput"
       style={
         Object {
           "background": "transparent",
@@ -63,13 +63,13 @@ exports[`Radio Group Snapshot 1`] = `
        
     </span>
     <span
-      className={undefined}
+      className="label"
     >
       No
     </span>
   </label>
   <label
-    className=""
+    className="root"
     style={
       Object {
         "color": "black",
@@ -78,7 +78,7 @@ exports[`Radio Group Snapshot 1`] = `
   >
     <input
       checked={false}
-      className={undefined}
+      className="input"
       name="TestName"
       onChange={[Function]}
       required={true}
@@ -86,7 +86,7 @@ exports[`Radio Group Snapshot 1`] = `
       value="maybe"
     />
     <span
-      className={undefined}
+      className="pseudoInput"
       style={
         Object {
           "background": "transparent",
@@ -96,7 +96,7 @@ exports[`Radio Group Snapshot 1`] = `
        
     </span>
     <span
-      className={undefined}
+      className="label"
     >
       Maybe
     </span>

test/__snapshots__/YesOrNo.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Yes or No Snapshot 1`] = `
 <div>
   <label
-    className=""
+    className="root inline"
     style={
       Object {
         "color": "black",
@@ -12,7 +12,7 @@ exports[`Yes or No Snapshot 1`] = `
   >
     <input
       checked={false}
-      className={undefined}
+      className="input"
       name="TestName"
       onChange={[Function]}
       required={undefined}
@@ -20,7 +20,7 @@ exports[`Yes or No Snapshot 1`] = `
       value="yes"
     />
     <span
-      className={undefined}
+      className="pseudoInput"
       style={
         Object {
           "background": "transparent",
@@ -30,13 +30,13 @@ exports[`Yes or No Snapshot 1`] = `
        
     </span>
     <span
-      className={undefined}
+      className="label"
     >
       Yes
     </span>
   </label>
   <label
-    className=""
+    className="root inline"
     style={
       Object {
         "color": "black",
@@ -45,7 +45,7 @@ exports[`Yes or No Snapshot 1`] = `
   >
     <input
       checked={false}
-      className={undefined}
+      className="input"
       name="TestName"
       onChange={[Function]}
       required={undefined}
@@ -53,7 +53,7 @@ exports[`Yes or No Snapshot 1`] = `
       value="no"
     />
     <span
-      className={undefined}
+      className="pseudoInput"
       style={
         Object {
           "background": "transparent",
@@ -63,7 +63,7 @@ exports[`Yes or No Snapshot 1`] = `
        
     </span>
     <span
-      className={undefined}
+      className="label"
     >
       No
     </span>

test/setup/enzyme.js

+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-15'
+
+Enzyme.configure({adapter: new Adapter()})
\ No newline at end of file

test/setup/styleMock.js

-module.exports = {}
\ No newline at end of file