Merge aec6b63 into a8f5f76

config/jest/setup.js

@@ -1,7 +1,7 @@
 import jsdom from 'jsdom'
 import sinon from 'sinon'
 import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
 import '@babel/polyfill'
 
 Enzyme.configure({ adapter: new Adapter() })

package.json

@@ -32,8 +32,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "peerDependencies": {
-    "react": ">15.4.2 <17.0.0",
-    "react-dom": ">15.4.2 <17.0.0"
+    "react": ">15.4.2",
+    "react-dom": ">15.4.2"
   },
   "files": [
     "dist/**/*"
@@ -57,10 +57,11 @@
     "@commitlint/config-conventional": "^8.3.4",
     "@types/jquery": "^3.5.6",
     "@types/node": "^14.0.13",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
@@ -69,7 +70,6 @@
     "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
     "coveralls": "^2.11.9",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "~17.1.0",
     "eslint-config-airbnb-base": "~13.1.0",
@@ -90,8 +90,8 @@
     "packwatch": "^1.0.0",
     "prettier": "^1.14.2",
     "prettier-eslint": "^9.0.1",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "2.5.4",
     "sass": "^1.37.4",
     "semantic-release": "^17.0.4",

src/components/__tests__/RootModal.test.js

@@ -7,22 +7,29 @@ describe('RootModal', function() {
   beforeEach(() => {
     jest.resetModules()
 
+    const rootElement = document.createElement('div')
+    document.body.appendChild(rootElement)
+
+    this.getRootElement = () => {
+      return rootElement
+    }
+
     this.makeSubject = () => {
       return mount(
         <RootModal>
-          <div className="root">foo</div>
+          <div className="content">foo</div>
         </RootModal>,
         {
-          attachTo: document.body,
+          attachTo: rootElement,
         },
       )
     }
   })
 
-  it('should has a div.root tag', () => {
+  it('should has a div.content tag', () => {
     const subject = this.makeSubject()
 
-    expect(subject.find('div.root').length).toBeTruthy()
+    expect(subject.find('div.content').length).toBeTruthy()
   })
 
   it('should has parent element which has specific className', () => {
@@ -46,6 +53,6 @@ describe('RootModal', function() {
     const subject = this.makeSubject()
 
     subject.unmount()
-    expect(document.body.querySelector('.iti-container')).toBeNull()
+    expect(this.getRootElement().querySelector('.iti-container')).toBeNull()
   })
 })