chore: support React 17

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@${

docs/src/index.js

@@ -1,3 +1,5 @@
+import 'react-hot-loader/patch'
+
 import React from 'react'
 import ReactDOM from '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,68 @@ describe('Modal', () => {
  })
 
  describe('dimmer', () => {
- it('adds a "dimmer" className to the body', () => {
- wrapperMount(<Modal open />)
- assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
+ describe('ss', () => {
+ 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 +533,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 +614,8 @@ describe('Modal', () => {
  window.innerHeight = 10
  wrapperMount(<Modal open>foo</Modal>)
 
- requestAnimationFrame(() => {
- assertBodyClasses('scrolling')
- wrapper.unmount()
-
+ waitForClassesCleanup(done, () => {
  assertBodyClasses('scrolling', false)
- done()
  })
  })
  })