From bc3eb010d0903a5dee68973a7e955f2463c69dc4 Mon Sep 17 00:00:00 2001
From: Tamlyn Rhodes <tamlyn@tamlyn.org>
Date: Wed, 29 Nov 2017 12:52:39 +0000
Subject: [PATCH] Upgrade to enzyme 3
Use identity-obj-proxy to get class names in snapshots.
---
package.json | 15 ++++++++------
test/RadioGroup.test.js | 6 +++---
test/__snapshots__/AppBar.test.js.snap | 12 +++++------
test/__snapshots__/Menu.test.js.snap | 12 +++++------
test/__snapshots__/Radio.test.js.snap | 8 ++++----
test/__snapshots__/RadioGroup.test.js.snap | 24 +++++++++++-----------
test/__snapshots__/YesOrNo.test.js.snap | 16 +++++++--------
test/setup/enzyme.js | 4 ++++
test/setup/styleMock.js | 1 -
9 files changed, 52 insertions(+), 46 deletions(-)
create mode 100644 test/setup/enzyme.js
delete mode 100644 test/setup/styleMock.js
diff --git a/package.json b/package.json
index 775ca60a7..1e54d9be4 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/test/RadioGroup.test.js b/test/RadioGroup.test.js
index 41697362f..be8884cad 100644
--- a/test/RadioGroup.test.js
+++ b/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
diff --git a/test/__snapshots__/AppBar.test.js.snap b/test/__snapshots__/AppBar.test.js.snap
index 0a98c2a9a..c8262fe21 100644
--- a/test/__snapshots__/AppBar.test.js.snap
+++ b/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]}
>
diff --git a/test/__snapshots__/Menu.test.js.snap b/test/__snapshots__/Menu.test.js.snap
index 1a24b603f..dfbe9ad31 100644
--- a/test/__snapshots__/Menu.test.js.snap
+++ b/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>
diff --git a/test/__snapshots__/Radio.test.js.snap b/test/__snapshots__/Radio.test.js.snap
index a625cdb63..cac26b5df 100644
--- a/test/__snapshots__/Radio.test.js.snap
+++ b/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>
diff --git a/test/__snapshots__/RadioGroup.test.js.snap b/test/__snapshots__/RadioGroup.test.js.snap
index a76a41da2..9302b211f 100644
--- a/test/__snapshots__/RadioGroup.test.js.snap
+++ b/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>
diff --git a/test/__snapshots__/YesOrNo.test.js.snap b/test/__snapshots__/YesOrNo.test.js.snap
index b301578a5..13fee7b65 100644
--- a/test/__snapshots__/YesOrNo.test.js.snap
+++ b/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>
diff --git a/test/setup/enzyme.js b/test/setup/enzyme.js
new file mode 100644
index 000000000..feb8347d9
--- /dev/null
+++ b/test/setup/enzyme.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-15'
+
+Enzyme.configure({adapter: new Adapter()})
\ No newline at end of file
diff --git a/test/setup/styleMock.js b/test/setup/styleMock.js
deleted file mode 100644
index 7c6d6c73d..000000000
--- a/test/setup/styleMock.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {}
\ No newline at end of file
--
GitLab