Enzyme 3

.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 [email protected]; fi
+  - npm install enzyme@$ENZYME_VERSION
 script:
   - npm test

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"
   }
 }

src/ChaiWrapper.js

@@ -1,7 +1,6 @@
 import wrap from './wrap'
 
 export default class ChaiWrapper {
-
   /**
    * Constructs a instance of the chai wrapper.
    *

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()
       }
     }
 

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} />`
     }
 

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} />`
     }
 

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
+  }
 }

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),

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(<Wrapper />).debug()
+}
 
 function reactArrayToJSXString (nodes) {
   let jsxString = '['

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)
   }
 }

test/attr.test.js

@@ -11,8 +11,12 @@ class Fixture extends React.Component {
       <div id='root'>
         <span id='child'>test</span>
         <video itemScope allowFullScreen={true} autoPlay={''} hidden={false} controls={null} loop={undefined}>test2</video>
-        <audio role name={''} accessKey={false} spellCheck={null} rel={magicToStringObject}>test3</audio>
-        <tr rowSpan={0} rows={0} cols={'4'} size={'0'} />
+        <audio disabled name={''} contentEditable={false} spellCheck={null} rel={magicToStringObject}>test3</audio>
+        <table>
+          <tbody>
+            <tr rowSpan={0} rows={0} cols={'4'} size={'0'} />
+          </tbody>
+        </table>
       </div>
     )
     /* eslint-enable react/jsx-boolean-value */
@@ -86,15 +90,15 @@ 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) => {
         expect(wrapper.find('audio')).to.have.attr('name')
       })
 
       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')
       })
     })

test/blank.test.js

@@ -1,8 +1,10 @@
 class Fixture extends React.Component {
   render () {
     return (
-      <div id='parent'>
-        <div id='child' />
+      <div>
+        <div id='parent'>
+          <div id='child' />
+        </div>
       </div>
     )
   }

test/descendants.test.js

@@ -1,10 +1,12 @@
 class Fixture extends React.Component {
   render () {
     return (
-      <div id='root'>
-        <span id='child'>
-          <span id='last' />
-        </span>
+      <div>
+        <div id='root'>
+          <span id='child'>
+            <span id='last' />
+          </span>
+        </div>
       </div>
     )
   }

test/empty.test.js

@@ -1,8 +1,12 @@
+/* eslint-disable no-unused-expressions */
+
 class Fixture extends React.Component {
   render () {
     return (
-      <div id='parent'>
-        <div id='child' />
+      <div>
+        <div id='parent'>
+          <div id='child' />
+        </div>
       </div>
     )
   }

test/exactly.test.js

@@ -1,17 +1,19 @@
 class Fixture extends React.Component {
   render () {
     return (
-      <div id='root'>
-        <div id='child'>
-          <div className='multiple' />
-          <div className='multiple' />
-          <div className='multiple' />
-          <div className='multiple' />
-          <div className='multiple' />
-          <div className='multiple' />
-          <div className='multiple' />
-          <div className='multiple' />
-          <span id='last' />
+      <div>
+        <div id='root'>
+          <div id='child'>
+            <div className='multiple' />
+            <div className='multiple' />
+            <div className='multiple' />
+            <div className='multiple' />
+            <div className='multiple' />
+            <div className='multiple' />
+            <div className='multiple' />
+            <div className='multiple' />
+            <span id='last' />
+          </div>
         </div>
       </div>
     )

test/exist.test.js

@@ -1,7 +1,11 @@
+/* eslint-disable no-unused-expressions */
+
 class Fixture extends React.Component {
   render () {
     return (
-      <div id='parent' />
+      <div>
+        <div id='parent' />
+      </div>
     )
   }
 }

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 (
       <div>Hello world</div>
     )
   }
-})
+}
+
+DisplayNameSyntax.displayName = 'DisplayNameSyntax'
 
 function inspect (wrapper) {
   return wrap(wrapper).inspect()
@@ -29,6 +29,8 @@ describe('#inspect', () => {
       expect(String(inspect(shallow(<ClassSyntax />)))).to.equal('<ClassSyntax />')
       expect(String(inspect(shallow(<DisplayNameSyntax />)))).to.equal('<DisplayNameSyntax />')
       expect(String(inspect(shallow(<DisplayNameSyntax />).find('div')))).to.equal('the node in <DisplayNameSyntax />')
+      expect(String(inspect(shallow(<DisplayNameSyntax />).find('span')))).to.equal('the node in <DisplayNameSyntax />')
+      expect(String(inspect(shallow(<div />)))).to.equal('<div />')
     })
   })
 
@@ -37,6 +39,7 @@ describe('#inspect', () => {
       expect(String(inspect(mount(<ClassSyntax />)))).to.equal('<ClassSyntax />')
       expect(String(inspect(mount(<DisplayNameSyntax />)))).to.equal('<DisplayNameSyntax />')
       expect(String(inspect(mount(<DisplayNameSyntax />).find('div')))).to.equal('the node in <DisplayNameSyntax />')
+      expect(String(inspect(mount(<DisplayNameSyntax />).find('span')))).to.equal('the node in <DisplayNameSyntax />')
     })
   })
 

test/match.test.js

@@ -7,9 +7,11 @@ class MyComponent extends React.Component {
 class Fixture extends React.Component {
   render () {
     return (
-      <div id='root'>
-        <span id='child'>test</span>
-        <MyComponent id='my-component' />
+      <div>
+        <div id='root'>
+          <span id='child'>test</span>
+          <MyComponent id='my-component' />
+        </div>
       </div>
     )
   }

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 })
   })
 })