From 892006750c4ee5c8d33135249813b31b71b7daf4 Mon Sep 17 00:00:00 2001 From: Rylan Collins Date: Tue, 3 Oct 2017 14:13:24 -0700 Subject: [PATCH] Add Enzyme 3 support (#198) --- .travis.yml | 4 ++++ package.json | 25 ++++++++++++------------ src/ChaiWrapper.js | 1 - src/CheerioTestWrapper.js | 5 ++--- src/ReactTestWrapper.js | 11 ++++------- src/ShallowTestWrapper.js | 12 ++++++++---- src/TestWrapper.js | 4 ++++ src/assertions/containMatchingElement.js | 4 ++-- src/reactNodeToString.js | 7 ++++++- src/wrap.js | 2 +- test/attr.test.js | 14 ++++++++----- test/blank.test.js | 6 ++++-- test/descendants.test.js | 10 ++++++---- test/empty.test.js | 8 ++++++-- test/exactly.test.js | 24 ++++++++++++----------- test/exist.test.js | 6 +++++- test/inspect.test.js | 11 +++++++---- test/match.test.js | 8 +++++--- test/null.test.js | 22 +++++++++++++++++++-- test/present.test.js | 4 +++- test/support/helper.js | 8 +++++++- 21 files changed, 129 insertions(+), 67 deletions(-) diff --git a/.travis.yml b/.travis.yml index 7f414ee..cf71f54 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,7 +8,11 @@ node_js: env: - CHAI_VERSION=^3.0.0 - CHAI_VERSION=^4.0.0 + - ENZYME_VERSION=^2 + - ENZYME_VERSION=^3 before_script: - npm install chai@$CHAI_VERSION + - if [ "$ENZYME_VERSION" = "^2" ]; then npm uninstall enzyme-adapter-react-15; npm install cheerio@0.22; fi + - npm install enzyme@$ENZYME_VERSION script: - npm test diff --git a/package.json b/package.json index f9108e7..ddbf9c0 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,10 @@ }, "peerDependencies": { "chai": "^3.0.0 || ^4.0.0", - "cheerio": "0.19.x || 0.20.x || 0.22.x || 1.0.0-rc.1", - "enzyme": "1.x || ^2.3.0", - "react": "^0.14.0 || ^15.0.0-0", - "react-dom": "^0.14.0 || ^15.0.0-0" + "cheerio": "0.19.x || 0.20.x || 0.22.x || ^1.0.0-0", + "enzyme": "^2.7.0 || ^3.0.0", + "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0", + "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0" }, "keywords": [ "javascript", @@ -57,14 +57,15 @@ "babel-preset-react": "^6.5.0", "babel-register": "^6.5.2", "chai": "^3.0.0 || ^4.0.0", - "cross-env": "3.1.4", - "enzyme": "^2.3.0", + "cross-env": "^3.1.4", + "enzyme": "^2.7.0 || ^3.0.0", + "enzyme-adapter-react-15": "^1.0.0", "jsdom": "^9.1.0", "mocha": "^3.0.0", "prop-types": "^15.5.7", - "react": "^0.14.0 || ^15.0.0-0", - "react-addons-test-utils": "^0.14.0 || ^15.0.0-0", - "react-dom": "^0.14.0 || ^15.0.0-0", + "react": "^15.6.2", + "react-dom": "^15.6.2", + "react-test-renderer": "^15.6.2", "rimraf": "^2.5.0", "snazzy": "^5.0.0", "standard": "^8.1.0" @@ -80,11 +81,11 @@ "afterEach", "React", "expect", - "createTest" + "createTest", + "isEnzyme3" ] }, "dependencies": { - "html": "^1.0.0", - "react-element-to-jsx-string": "^5.0.0" + "html": "^1.0.0" } } diff --git a/src/ChaiWrapper.js b/src/ChaiWrapper.js index ef684f4..791a199 100644 --- a/src/ChaiWrapper.js +++ b/src/ChaiWrapper.js @@ -1,7 +1,6 @@ import wrap from './wrap' export default class ChaiWrapper { - /** * Constructs a instance of the chai wrapper. * diff --git a/src/CheerioTestWrapper.js b/src/CheerioTestWrapper.js index 6aec4e2..273ad4e 100644 --- a/src/CheerioTestWrapper.js +++ b/src/CheerioTestWrapper.js @@ -8,10 +8,9 @@ export default class CheerioTestWrapper extends TestWrapper { get el () { if (!this.__el) { - if (this.wrapper.first()['0'].type === 'root') { + this.__el = this.wrapper.first() + if (this.__el.length > 0 && this.__el['0'].type === 'root') { this.__el = this.wrapper.children().first() - } else { - this.__el = this.wrapper.first() } } diff --git a/src/ReactTestWrapper.js b/src/ReactTestWrapper.js index afaeaab..7e3055c 100644 --- a/src/ReactTestWrapper.js +++ b/src/ReactTestWrapper.js @@ -1,5 +1,3 @@ -import {findDOMNode} from 'enzyme/build/react-compat' - import TestWrapper from './TestWrapper' export default class ReactTestWrapper extends TestWrapper { @@ -10,18 +8,17 @@ export default class ReactTestWrapper extends TestWrapper { get el () { if (!this.__el) { - this.__el = this.wrapper.single((n) => findDOMNode(n)) + this.__el = this.wrapper.getDOMNode() } return this.__el } inspect () { - const name = this.wrapper.root.node.constructor.displayName || - this.wrapper.root.node.constructor.name || - '???' + const root = this.root() + const name = root.name() || '???' - if (this.wrapper.root === this.wrapper) { + if (root === this.wrapper) { return `<${name} />` } diff --git a/src/ShallowTestWrapper.js b/src/ShallowTestWrapper.js index 4707bb4..6a3edac 100644 --- a/src/ShallowTestWrapper.js +++ b/src/ShallowTestWrapper.js @@ -2,6 +2,8 @@ import $ from 'cheerio' import TestWrapper from './TestWrapper' +const getDisplayName = type => type.displayName || type.name || type + export default class ShallowTestWrapper extends TestWrapper { constructor (wrapper) { super() @@ -17,11 +19,13 @@ export default class ShallowTestWrapper extends TestWrapper { } inspect () { - const name = this.wrapper.root.unrendered.type.displayName || - this.wrapper.root.unrendered.type.name || - '???' + const root = this.root() + + const rootInstance = root.instance() + const rootType = rootInstance && rootInstance.constructor + const name = rootType ? getDisplayName(rootType) : (root.name() || '???') - if (this.wrapper.root === this.wrapper) { + if (root === this.wrapper) { return `<${name} />` } diff --git a/src/TestWrapper.js b/src/TestWrapper.js index e91acc1..d48f50d 100644 --- a/src/TestWrapper.js +++ b/src/TestWrapper.js @@ -38,4 +38,8 @@ export default class TestWrapper { text () { return this.wrapper.text() } + + root () { + return (typeof this.wrapper.root === 'function') ? this.wrapper.root() : this.wrapper.root + } } diff --git a/src/assertions/containMatchingElement.js b/src/assertions/containMatchingElement.js index 00bc7d4..447e53d 100644 --- a/src/assertions/containMatchingElement.js +++ b/src/assertions/containMatchingElement.js @@ -1,7 +1,7 @@ -import reactElementToJSXString from 'react-element-to-jsx-string' +import reactNodeToString from '../reactNodeToString' export default function containMatchingElement ({ wrapper, markup, arg1, sig }) { - const arg1JSXString = reactElementToJSXString(arg1) + const arg1JSXString = reactNodeToString(arg1) this.assert( wrapper.wrapper.containsMatchingElement(arg1), diff --git a/src/reactNodeToString.js b/src/reactNodeToString.js index 0dbc78b..85f06ac 100644 --- a/src/reactNodeToString.js +++ b/src/reactNodeToString.js @@ -1,4 +1,9 @@ -import reactElementToJSXString from 'react-element-to-jsx-string' +import { shallow } from 'enzyme' + +function reactElementToJSXString (node) { + const Wrapper = () => node + return shallow().debug() +} function reactArrayToJSXString (nodes) { let jsxString = '[' diff --git a/src/wrap.js b/src/wrap.js index 1f74935..e864f4b 100644 --- a/src/wrap.js +++ b/src/wrap.js @@ -13,7 +13,7 @@ export default function wrap (el) { return new ReactTestWrapper(el) } - if (el && el._root && el.options) { + if (el && el.cheerio && el.options) { return new CheerioTestWrapper(el) } } diff --git a/test/attr.test.js b/test/attr.test.js index 21dd515..8d5b911 100644 --- a/test/attr.test.js +++ b/test/attr.test.js @@ -11,8 +11,12 @@ class Fixture extends React.Component {
test - - + + + + + +
) /* eslint-enable react/jsx-boolean-value */ @@ -86,7 +90,7 @@ describe('#attr', () => { describe('regular attrs', () => { it('passes when attribute exists without a value', (wrapper) => { - expect(wrapper.find('audio')).to.have.attr('role') + expect(wrapper.find('audio')).to.have.attr('disabled') }) it('passes when attribute exists with a falsey (but not false/null/undefined) value', (wrapper) => { @@ -94,7 +98,7 @@ describe('#attr', () => { }) it('passes when attribute exists but has value `false`', (wrapper) => { - expect(wrapper.find('audio')).to.have.attr('accesskey') + expect(wrapper.find('audio')).to.have.attr('contenteditable') }) it('passes negated when attribute exists but has value `null`', (wrapper) => { @@ -148,7 +152,7 @@ describe('#attr', () => { describe('regular attrs', () => { it('converts values to strings', (wrapper) => { - expect(wrapper.find('audio')).to.have.attr('accesskey', 'false') + expect(wrapper.find('audio')).to.have.attr('contenteditable', 'false') expect(wrapper.find('audio')).to.have.attr('rel', 'magic') }) }) diff --git a/test/blank.test.js b/test/blank.test.js index b061ce9..3426ae7 100644 --- a/test/blank.test.js +++ b/test/blank.test.js @@ -1,8 +1,10 @@ class Fixture extends React.Component { render () { return ( -
-
+
+
+
+
) } diff --git a/test/descendants.test.js b/test/descendants.test.js index de1d044..8e89a6d 100644 --- a/test/descendants.test.js +++ b/test/descendants.test.js @@ -1,10 +1,12 @@ class Fixture extends React.Component { render () { return ( -
- - - +
+
+ + + +
) } diff --git a/test/empty.test.js b/test/empty.test.js index 261fd8f..aae1fe9 100644 --- a/test/empty.test.js +++ b/test/empty.test.js @@ -1,8 +1,12 @@ +/* eslint-disable no-unused-expressions */ + class Fixture extends React.Component { render () { return ( -
-
+
+
+
+
) } diff --git a/test/exactly.test.js b/test/exactly.test.js index 7a1d5b3..ec5243d 100644 --- a/test/exactly.test.js +++ b/test/exactly.test.js @@ -1,17 +1,19 @@ class Fixture extends React.Component { render () { return ( -
-
-
-
-
-
-
-
-
-
- +
+
+
+
+
+
+
+
+
+
+
+ +
) diff --git a/test/exist.test.js b/test/exist.test.js index c783615..d527b4d 100644 --- a/test/exist.test.js +++ b/test/exist.test.js @@ -1,7 +1,11 @@ +/* eslint-disable no-unused-expressions */ + class Fixture extends React.Component { render () { return ( -
+
+
+
) } } diff --git a/test/inspect.test.js b/test/inspect.test.js index 0c31914..ab5aed2 100644 --- a/test/inspect.test.js +++ b/test/inspect.test.js @@ -9,15 +9,15 @@ class ClassSyntax extends React.Component { } } -const DisplayNameSyntax = React.createClass({ - displayName: 'DisplayNameSyntax', - +const DisplayNameSyntax = class extends React.Component { render () { return (
Hello world
) } -}) +} + +DisplayNameSyntax.displayName = 'DisplayNameSyntax' function inspect (wrapper) { return wrap(wrapper).inspect() @@ -29,6 +29,8 @@ describe('#inspect', () => { expect(String(inspect(shallow()))).to.equal('') expect(String(inspect(shallow()))).to.equal('') expect(String(inspect(shallow().find('div')))).to.equal('the node in ') + expect(String(inspect(shallow().find('span')))).to.equal('the node in ') + expect(String(inspect(shallow(
)))).to.equal('
') }) }) @@ -37,6 +39,7 @@ describe('#inspect', () => { expect(String(inspect(mount()))).to.equal('') expect(String(inspect(mount()))).to.equal('') expect(String(inspect(mount().find('div')))).to.equal('the node in ') + expect(String(inspect(mount().find('span')))).to.equal('the node in ') }) }) diff --git a/test/match.test.js b/test/match.test.js index 0f8cef8..5a52c62 100644 --- a/test/match.test.js +++ b/test/match.test.js @@ -7,9 +7,11 @@ class MyComponent extends React.Component { class Fixture extends React.Component { render () { return ( -
- test - +
+
+ test + +
) } diff --git a/test/null.test.js b/test/null.test.js index c304898..0f5ea7a 100644 --- a/test/null.test.js +++ b/test/null.test.js @@ -24,12 +24,30 @@ describe('#present', () => { describe('()', () => { it('passes when the actual matches the expected', (wrapper) => { expect(wrapper).to.be.present() - }) + }, { render: false }) + + it('passes when the actual matches the expected', (wrapper) => { + let expectation = expect(wrapper) + if (isEnzyme3) { + expectation = expectation.not + } + expectation.to.be.present() + }, { shallow: false, mount: false }) it('fails when the actual does not match the expected', (wrapper) => { expect(() => { expect(wrapper).to.not.be.present() }).to.throw('not to exist') - }) + }, { render: false }) + + it('fails when the actual does not match the expected', (wrapper) => { + let expectation = expect(() => { + expect(wrapper).to.be.present() + }) + if (!isEnzyme3) { + expectation = expectation.not + } + expectation.to.throw('to exist') + }, { shallow: false, mount: false }) }) }) diff --git a/test/present.test.js b/test/present.test.js index 6b3630d..8aa2429 100644 --- a/test/present.test.js +++ b/test/present.test.js @@ -1,7 +1,9 @@ class Fixture extends React.Component { render () { return ( -
+
+
+
) } } diff --git a/test/support/helper.js b/test/support/helper.js index 53f35ca..d1a66c3 100644 --- a/test/support/helper.js +++ b/test/support/helper.js @@ -1,8 +1,14 @@ import jsdom from 'jsdom' import chai from 'chai' - +import Enzyme from 'enzyme' import plugin from '../../src' +global.isEnzyme3 = (process.env.ENZYME_VERSION !== '^2') +if (isEnzyme3) { + const Adapter = require('enzyme-adapter-react-15') + Enzyme.configure({ adapter: new Adapter() }) +} + const doc = jsdom.jsdom('') const win = doc.defaultView