Switch to react-testing-library

package.json

@@ -13,7 +13,8 @@
   "author": "atomiks",
   "license": "MIT",
   "jest": {
-    "setupTestFrameworkScriptFile": "<rootDir>test/setup.js"
+    "setupTestFrameworkScriptFile": "<rootDir>test/setup.js",
+    "coveragePathIgnorePatterns": ["test/setup.js"]
   },
   "dependencies": {
     "prop-types": "^15.6.2",
@@ -31,12 +32,11 @@
     "@babel/preset-react": "^7.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.4.0",
     "jest": "^23.5.0",
     "parcel": "^1.10.3",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
+    "react-testing-library": "^5.2.3",
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-babel-minify": "^5.0.0",

test/Tippy.test.js

@@ -1,121 +1,104 @@
 import React from 'react'
 import Tippy from '../src/Tippy'
-import { mount } from 'enzyme'
 import ReactDOMServer from 'react-dom/server'
+import { render, fireEvent, cleanup } from 'react-testing-library'
+
+afterEach(cleanup)
 
 describe('<Tippy />', () => {
   test('renders only the child element', () => {
-    const wrapper = mount(
+    const stringContent = render(
       <Tippy content="tooltip">
         <button />
       </Tippy>
     )
-    expect(
-      wrapper
-        .children()
-        .first()
-        .equals(<button />)
-    ).toBe(true)
-    wrapper.unmount()
+    expect(stringContent.container.innerHTML).toBe('<button></button>')
+    const reactElementContent = render(
+      <Tippy content={<div>tooltip</div>}>
+        <button />
+      </Tippy>
+    )
+    expect(reactElementContent.container.innerHTML).toBe('<button></button>')
   })
 
   test('adds a tippy instance to the child node', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Tippy content="tooltip">
         <button />
       </Tippy>
     )
-    expect(wrapper.getDOMNode()._tippy).toBeDefined()
-    wrapper.unmount()
+    expect(container.querySelector('button')._tippy).toBeDefined()
   })
 
   test('calls onCreate() on mount, passing the instance back', () => {
     const spy = jest.fn()
-    const wrapper = mount(
-      <div>
-        <Tippy onCreate={spy} content="tooltip">
-          <button>Hello</button>
-        </Tippy>
-      </div>
+    render(
+      <Tippy content="tooltip" onCreate={spy}>
+        <button />
+      </Tippy>
     )
-    expect(spy.mock.calls.length).toBe(1)
+    expect(spy).toHaveBeenCalledTimes(1)
     const arg = spy.mock.calls[0][0]
-    expect(arg.popper).toBeDefined()
     expect(arg.reference).toBeDefined()
-    wrapper.unmount()
+    expect(arg.popper).toBeDefined()
   })
 
-  test('renders JSX inside content prop', () => {
-    const wrapper = mount(
-      <div>
-        <Tippy content={<strong />}>
-          <button />
-        </Tippy>
-      </div>
+  test('renders react element content inside the content prop', () => {
+    const { container } = render(
+      <Tippy content={<strong>tooltip</strong>}>
+        <button />
+      </Tippy>
     )
-    expect(
-      wrapper
-        .find('button')
-        .getDOMNode()
-        ._tippy.popperChildren.content.querySelector('strong')
-    ).not.toBe(null)
-    wrapper.unmount()
+    const tip = container.querySelector('button')._tippy
+    expect(tip.popper.querySelector('strong')).not.toBeNull()
   })
 
   test('unmount destroys the tippy instance and allows garbage collection', () => {
-    const wrapper = mount(
-      <div>
-        <Tippy content="tooltip">
-          <button />
-        </Tippy>
-      </div>
+    const { container, unmount } = render(
+      <Tippy content="tooltip">
+        <button />
+      </Tippy>
     )
-    const tip = wrapper.find('button').getDOMNode()._tippy
-    expect(tip.state.isDestroyed).toBe(false)
-    wrapper
-      .find(Tippy)
-      .instance()
-      .componentWillUnmount()
-    expect(tip.state.isDestroyed).toBe(true)
-    wrapper.unmount()
+    const button = container.querySelector('button')
+    unmount()
+    expect(button._tippy).toBeUndefined()
   })
 
   test('updating state updates the tippy instance', done => {
     class App extends React.Component {
-      state = { arrow: false }
+      state = { arrow: false, interactive: false }
+      componentDidUpdate() {
+        expect(tip.props.arrow).toBe(true)
+        expect(tip.props.interactive).toBe(true)
+        done()
+      }
       render() {
+        const { arrow, interactive } = this.state
         return (
-          <Tippy content="tooltip" arrow={this.state.arrow}>
-            <button onClick={() => this.setState({ arrow: true })} />
+          <Tippy content="tooltip" arrow={arrow} interactive={interactive}>
+            <button
+              onClick={() => this.setState({ arrow: true, interactive: true })}
+            />
           </Tippy>
         )
       }
     }
-    const wrapper = mount(<App />)
-    const instance = wrapper.getDOMNode()._tippy
-    expect(instance.props.arrow).toBe(false)
-    wrapper.setState({ arrow: true }, () => {
-      expect(instance.props.arrow).toBe(true)
-      wrapper.unmount()
-      done()
-    })
+    const { container } = render(<App />)
+    const button = container.querySelector('button')
+    const tip = button._tippy
+    expect(tip.props.arrow).toBe(false)
+    expect(tip.props.interactive).toBe(false)
+    fireEvent.click(button)
   })
 
   test('component as a child', () => {
-    class Button extends React.Component {
-      render() {
-        return <button>My button</button>
-      }
-    }
-    const wrapper = mount(
-      <div>
-        <Tippy content="tooltip">
-          <Button />
-        </Tippy>
-      </div>
+    const Child = () => <button />
+    const { container } = render(
+      <Tippy content="tooltip">
+        <Child />
+      </Tippy>
     )
-    expect(wrapper.find(Tippy).getDOMNode()._tippy).toBeDefined()
-    wrapper.unmount()
+    expect(container.querySelector('button')._tippy).toBeDefined()
   })
 
   test('tooltip content is not rendered to the DOM', () => {

test/setup.js

@@ -1,4 +1,20 @@
-import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+global.MutationObserver = class {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+}
 
-Enzyme.configure({ adapter: new Adapter() })
+global.window.document.createRange = function createRange() {
+  return {
+    setEnd: () => {},
+    setStart: () => {},
+    getBoundingClientRect: () => {
+      return { right: 0 }
+    },
+    getClientRects: () => [],
+    commonAncestorContainer: document.createElement('div')
+  }
+}
+
+global.window.focus = () => {}
+global.window.scroll = () => {}