chore: support React 17 (#4031)

* chore: use React 17

* remove not required changes

Author: layershifter

docs/src/components/Document.js

@@ -40,11 +40,9 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
         }.js`}
       />
       <script
-        src={
-          dev
-            ? ` https://cdn.jsdelivr.net/npm/@hot-loader/react-dom@${versions.react}/umd/react-dom.development.js`
-            : `https://cdn.jsdelivr.net/npm/react-dom@${versions.react}/umd/react-dom.production.min.js`
-        }
+        src={`https://cdn.jsdelivr.net/npm/react-dom@${versions.react}/umd/react-dom${
+          dev ? '.development' : '.production.min'
+        }.js`}
       />
       <script
         src={`https://cdn.jsdelivr.net/npm/react-dom@${

package.json

@@ -34,7 +34,7 @@
     "release:patch": "yarn prerelease && ta-script npm/release patch && yarn postrelease",
     "prestart": "yarn satisfied --fix yarn",
     "start": "cross-env NODE_ENV=development gulp --series start:docs",
-    "satisfied": "satisfied --ignore \"webpack\" --skip-invalid",
+    "satisfied": "satisfied --ignore \"webpack|react|react-dom\" --skip-invalid",
     "pretest": "yarn satisfied && gulp build:docs:docgen",
     "test": "cross-env NODE_ENV=test node -r @babel/register ./node_modules/karma/bin/karma start karma.conf.babel.js",
     "test:watch": "yarn test --no-single-run",
@@ -77,7 +77,7 @@
     "lodash": "^4.17.19",
     "lodash-es": "^4.17.15",
     "prop-types": "^15.7.2",
-    "react-is": "^16.8.6",
+    "react-is": "^16.8.6 || ^17.0.0",
     "react-popper": "^2.2.3",
     "shallowequal": "^1.1.0"
   },
@@ -100,6 +100,7 @@
     "@types/react": "^16.9.43",
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.1.1",
     "anchor-js": "^4.2.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
@@ -120,7 +121,6 @@
     "doctoc": "^1.4.0",
     "doctrine": "^3.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.5.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
@@ -151,19 +151,19 @@
     "prismjs": "^1.20.0",
     "puppeteer": "^5.2.1",
     "raw-loader": "^4.0.1",
-    "react": "^16.9.0",
+    "react": "^17.0.0",
     "react-ace": "^6.4.0",
     "react-codesandboxer": "^3.1.3",
     "react-docgen": "^4.1.0",
-    "react-dom": "^16.9.0",
-    "react-hot-loader": "^4.12.11",
+    "react-dom": "^17.0.0",
+    "react-hot-loader": "^4.13.0",
     "react-intersection-observer": "^8.26.2",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-source-render": "^3.0.0-5",
     "react-static": "^5.9.7",
     "react-static-routes": "^1.0.0",
-    "react-test-renderer": "^16.9.0",
+    "react-test-renderer": "^17.0.0",
     "react-universal-component": "^3.0.3",
     "rimraf": "^3.0.2",
     "satisfied": "^1.1.2",
@@ -185,13 +185,17 @@
     "webpack-dev-middleware": "^3.7.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
   },
   "resolutions": {
     "babel-plugin-universal-import": "^2.0.2",
-    "react-universal-component": "^3.0.3",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-is": "^17.0.0",
     "react-router": "^5.0.0",
-    "react-router-dom": "^5.0.0"
+    "react-router-dom": "^5.0.0",
+    "react-test-renderer": "^17.0.0",
+    "react-universal-component": "^3.0.3"
   }
 }

test/setup.js

@@ -2,10 +2,10 @@
  * Setup
  * This is the bootstrap code that is run before any tests, utils, mocks.
  */
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
 import chai from 'chai'
 import chaiEnzyme from 'chai-enzyme'
 import enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
 import dirtyChai from 'dirty-chai'
 import sinonChai from 'sinon-chai'
 

test/specs/lib/hooks/useClassNamesOnNode-test.js

@@ -1,4 +1,6 @@
 import React from 'react'
+import { act } from 'react-dom/test-utils'
+
 import useClassNamesOnNode from 'src/lib/hooks/useClassNamesOnNode'
 
 function TestComponent(props) {
@@ -45,7 +47,9 @@ describe('useClassNamesOnNode', () => {
 
       node.classList.contains('foo').should.be.equal(true)
 
-      wrapper.unmount()
+      act(() => {
+        wrapper.unmount()
+      })
       node.classList.contains('foo').should.be.equal(false)
     })
 

test/specs/modules/Modal/Modal-test.js

@@ -30,6 +30,16 @@ let wrapper
 const wrapperMount = (...args) => (wrapper = mount(...args))
 const wrapperShallow = (...args) => (wrapper = shallow(...args))
 
+// cleanup in `useEffect()` is executed async, so we need to perform a proper cleanup first to avoid
+// collisions with other tests
+function waitForClassesCleanup(done, customAssertions = () => {}) {
+  wrapper.unmount()
+  assertWithTimeout(() => {
+    assertBodyClasses('dimmed', false)
+    customAssertions()
+  }, done)
+}
+
 describe('Modal', () => {
   beforeEach(() => {
     if (wrapper && wrapper.unmount) {
@@ -236,54 +246,66 @@ describe('Modal', () => {
   })
 
   describe('dimmer', () => {
-    it('adds a "dimmer" className to the body', () => {
+    it('adds a "dimmer" className to the body', (done) => {
       wrapperMount(<Modal open />)
+
       assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
+      waitForClassesCleanup(done)
     })
 
     describe('can be "true"', () => {
-      it('adds/removes body classes "dimmable dimmed" on mount/unmount', () => {
+      it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => {
         assertBodyClasses('dimmable dimmed', false)
 
         wrapperMount(<Modal open dimmer />)
         assertBodyClasses('dimmable dimmed')
 
         wrapper.setProps({ open: false })
         assertBodyClasses('dimmable dimmed', false)
+
+        waitForClassesCleanup(done)
       })
     })
 
     describe('blurring', () => {
-      it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', () => {
+      it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', (done) => {
         assertBodyClasses('dimmable dimmed blurring', false)
 
         wrapperMount(<Modal open dimmer='blurring' />)
         assertBodyClasses('dimmable dimmed blurring')
 
         wrapper.setProps({ open: false })
         assertBodyClasses('dimmable dimmed blurring', false)
+
+        waitForClassesCleanup(done)
       })
 
-      it('adds a dimmer to the body', () => {
+      it('adds a dimmer to the body', (done) => {
         wrapperMount(<Modal open dimmer='blurring' />)
+
         assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
+        waitForClassesCleanup(done)
       })
     })
 
     describe('inverted', () => {
-      it('adds/removes body classes "dimmable dimmed" on mount/unmount', () => {
+      it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => {
         assertBodyClasses('dimmable dimmed', false)
 
         wrapperMount(<Modal open dimmer />)
         assertBodyClasses('dimmable dimmed')
 
         wrapper.setProps({ open: false })
         assertBodyClasses('dimmable dimmed', false)
+
+        waitForClassesCleanup(done)
       })
 
-      it('adds an inverted dimmer to the body', () => {
+      it('adds an inverted dimmer to the body', (done) => {
         wrapperMount(<Modal open dimmer='inverted' />)
+
         assertBodyContains('.ui.inverted.page.modals.dimmer.transition.visible.active')
+        waitForClassesCleanup(done)
       })
     })
 
@@ -509,9 +531,11 @@ describe('Modal', () => {
       window.innerHeight = innerHeight
     })
 
-    it('does not add the scrolling class to the body by default', () => {
+    it('does not add the scrolling class to the body by default', (done) => {
       wrapperMount(<Modal open />)
+
       assertBodyClasses('scrolling', false)
+      waitForClassesCleanup(done)
     })
 
     it('does not add the scrolling class to the body when equal to the window height', (done) => {
@@ -588,12 +612,8 @@ describe('Modal', () => {
       window.innerHeight = 10
       wrapperMount(<Modal open>foo</Modal>)
 
-      requestAnimationFrame(() => {
-        assertBodyClasses('scrolling')
-        wrapper.unmount()
-
+      waitForClassesCleanup(done, () => {
         assertBodyClasses('scrolling', false)
-        done()
       })
     })
   })