Skip to content

Commit c828368

Browse files
layershifterlayershifter
authored
chore: support React 17 (#4031)
* chore: use React 17 * remove not required changes
1 parent e8fe5f2 commit c828368

File tree

6 files changed

+118
-86
lines changed

6 files changed

+118
-86
lines changed

‎docs/src/components/Document.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,9 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
4040
}.js`}
4141
/>
4242
<script
43-
src={
44-
dev
45-
? ` https://cdn.jsdelivr.net/npm/@hot-loader/react-dom@${versions.react}/umd/react-dom.development.js`
46-
: `https://cdn.jsdelivr.net/npm/react-dom@${versions.react}/umd/react-dom.production.min.js`
47-
}
43+
src={`https://cdn.jsdelivr.net/npm/react-dom@${versions.react}/umd/react-dom${
44+
dev ? '.development' : '.production.min'
45+
}.js`}
4846
/>
4947
<script
5048
src={`https://cdn.jsdelivr.net/npm/react-dom@${

‎package.json

+15-11
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"release:patch": "yarn prerelease && ta-script npm/release patch && yarn postrelease",
3535
"prestart": "yarn satisfied --fix yarn",
3636
"start": "cross-env NODE_ENV=development gulp --series start:docs",
37-
"satisfied": "satisfied --ignore \"webpack\" --skip-invalid",
37+
"satisfied": "satisfied --ignore \"webpack|react|react-dom\" --skip-invalid",
3838
"pretest": "yarn satisfied && gulp build:docs:docgen",
3939
"test": "cross-env NODE_ENV=test node -r @babel/register ./node_modules/karma/bin/karma start karma.conf.babel.js",
4040
"test:watch": "yarn test --no-single-run",
@@ -77,7 +77,7 @@
7777
"lodash": "^4.17.19",
7878
"lodash-es": "^4.17.15",
7979
"prop-types": "^15.7.2",
80-
"react-is": "^16.8.6",
80+
"react-is": "^16.8.6 || ^17.0.0",
8181
"react-popper": "^2.2.3",
8282
"shallowequal": "^1.1.0"
8383
},
@@ -100,6 +100,7 @@
100100
"@types/react": "^16.9.43",
101101
"@typescript-eslint/eslint-plugin": "^3.7.1",
102102
"@typescript-eslint/parser": "^3.7.1",
103+
"@wojtekmaj/enzyme-adapter-react-17": "^0.1.1",
103104
"anchor-js": "^4.2.2",
104105
"babel-eslint": "^10.1.0",
105106
"babel-loader": "^8.1.0",
@@ -120,7 +121,6 @@
120121
"doctoc": "^1.4.0",
121122
"doctrine": "^3.0.0",
122123
"enzyme": "^3.11.0",
123-
"enzyme-adapter-react-16": "^1.15.2",
124124
"eslint": "^7.5.0",
125125
"eslint-config-airbnb": "^18.2.0",
126126
"eslint-config-prettier": "^6.11.0",
@@ -151,19 +151,19 @@
151151
"prismjs": "^1.20.0",
152152
"puppeteer": "^5.2.1",
153153
"raw-loader": "^4.0.1",
154-
"react": "^16.9.0",
154+
"react": "^17.0.0",
155155
"react-ace": "^6.4.0",
156156
"react-codesandboxer": "^3.1.3",
157157
"react-docgen": "^4.1.0",
158-
"react-dom": "^16.9.0",
159-
"react-hot-loader": "^4.12.11",
158+
"react-dom": "^17.0.0",
159+
"react-hot-loader": "^4.13.0",
160160
"react-intersection-observer": "^8.26.2",
161161
"react-router": "^5.0.0",
162162
"react-router-dom": "^5.0.0",
163163
"react-source-render": "^3.0.0-5",
164164
"react-static": "^5.9.7",
165165
"react-static-routes": "^1.0.0",
166-
"react-test-renderer": "^16.9.0",
166+
"react-test-renderer": "^17.0.0",
167167
"react-universal-component": "^3.0.3",
168168
"rimraf": "^3.0.2",
169169
"satisfied": "^1.1.2",
@@ -185,13 +185,17 @@
185185
"webpack-dev-middleware": "^3.7.2"
186186
},
187187
"peerDependencies": {
188-
"react": "^16.8.0",
189-
"react-dom": "^16.8.0"
188+
"react": "^16.8.0 || ^17.0.0",
189+
"react-dom": "^16.8.0 || ^17.0.0"
190190
},
191191
"resolutions": {
192192
"babel-plugin-universal-import": "^2.0.2",
193-
"react-universal-component": "^3.0.3",
193+
"react": "^17.0.0",
194+
"react-dom": "^17.0.0",
195+
"react-is": "^17.0.0",
194196
"react-router": "^5.0.0",
195-
"react-router-dom": "^5.0.0"
197+
"react-router-dom": "^5.0.0",
198+
"react-test-renderer": "^17.0.0",
199+
"react-universal-component": "^3.0.3"
196200
}
197201
}

‎test/setup.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
* Setup
33
* This is the bootstrap code that is run before any tests, utils, mocks.
44
*/
5+
import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
56
import chai from 'chai'
67
import chaiEnzyme from 'chai-enzyme'
78
import enzyme from 'enzyme'
8-
import Adapter from 'enzyme-adapter-react-16'
99
import dirtyChai from 'dirty-chai'
1010
import sinonChai from 'sinon-chai'
1111

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import React from 'react'
2+
import { act } from 'react-dom/test-utils'
3+
24
import useClassNamesOnNode from 'src/lib/hooks/useClassNamesOnNode'
35

46
function TestComponent(props) {
@@ -45,7 +47,9 @@ describe('useClassNamesOnNode', () => {
4547

4648
node.classList.contains('foo').should.be.equal(true)
4749

48-
wrapper.unmount()
50+
act(() => {
51+
wrapper.unmount()
52+
})
4953
node.classList.contains('foo').should.be.equal(false)
5054
})
5155

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

+32-12
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,16 @@ let wrapper
3030
const wrapperMount = (...args) => (wrapper = mount(...args))
3131
const wrapperShallow = (...args) => (wrapper = shallow(...args))
3232

33+
// cleanup in `useEffect()` is executed async, so we need to perform a proper cleanup first to avoid
34+
// collisions with other tests
35+
function waitForClassesCleanup(done, customAssertions = () => {}) {
36+
wrapper.unmount()
37+
assertWithTimeout(() => {
38+
assertBodyClasses('dimmed', false)
39+
customAssertions()
40+
}, done)
41+
}
42+
3343
describe('Modal', () => {
3444
beforeEach(() => {
3545
if (wrapper && wrapper.unmount) {
@@ -236,54 +246,66 @@ describe('Modal', () => {
236246
})
237247

238248
describe('dimmer', () => {
239-
it('adds a "dimmer" className to the body', () => {
249+
it('adds a "dimmer" className to the body', (done) => {
240250
wrapperMount(<Modal open />)
251+
241252
assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
253+
waitForClassesCleanup(done)
242254
})
243255

244256
describe('can be "true"', () => {
245-
it('adds/removes body classes "dimmable dimmed" on mount/unmount', () => {
257+
it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => {
246258
assertBodyClasses('dimmable dimmed', false)
247259

248260
wrapperMount(<Modal open dimmer />)
249261
assertBodyClasses('dimmable dimmed')
250262

251263
wrapper.setProps({ open: false })
252264
assertBodyClasses('dimmable dimmed', false)
265+
266+
waitForClassesCleanup(done)
253267
})
254268
})
255269

256270
describe('blurring', () => {
257-
it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', () => {
271+
it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', (done) => {
258272
assertBodyClasses('dimmable dimmed blurring', false)
259273

260274
wrapperMount(<Modal open dimmer='blurring' />)
261275
assertBodyClasses('dimmable dimmed blurring')
262276

263277
wrapper.setProps({ open: false })
264278
assertBodyClasses('dimmable dimmed blurring', false)
279+
280+
waitForClassesCleanup(done)
265281
})
266282

267-
it('adds a dimmer to the body', () => {
283+
it('adds a dimmer to the body', (done) => {
268284
wrapperMount(<Modal open dimmer='blurring' />)
285+
269286
assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
287+
waitForClassesCleanup(done)
270288
})
271289
})
272290

273291
describe('inverted', () => {
274-
it('adds/removes body classes "dimmable dimmed" on mount/unmount', () => {
292+
it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => {
275293
assertBodyClasses('dimmable dimmed', false)
276294

277295
wrapperMount(<Modal open dimmer />)
278296
assertBodyClasses('dimmable dimmed')
279297

280298
wrapper.setProps({ open: false })
281299
assertBodyClasses('dimmable dimmed', false)
300+
301+
waitForClassesCleanup(done)
282302
})
283303

284-
it('adds an inverted dimmer to the body', () => {
304+
it('adds an inverted dimmer to the body', (done) => {
285305
wrapperMount(<Modal open dimmer='inverted' />)
306+
286307
assertBodyContains('.ui.inverted.page.modals.dimmer.transition.visible.active')
308+
waitForClassesCleanup(done)
287309
})
288310
})
289311

@@ -509,9 +531,11 @@ describe('Modal', () => {
509531
window.innerHeight = innerHeight
510532
})
511533

512-
it('does not add the scrolling class to the body by default', () => {
534+
it('does not add the scrolling class to the body by default', (done) => {
513535
wrapperMount(<Modal open />)
536+
514537
assertBodyClasses('scrolling', false)
538+
waitForClassesCleanup(done)
515539
})
516540

517541
it('does not add the scrolling class to the body when equal to the window height', (done) => {
@@ -588,12 +612,8 @@ describe('Modal', () => {
588612
window.innerHeight = 10
589613
wrapperMount(<Modal open>foo</Modal>)
590614

591-
requestAnimationFrame(() => {
592-
assertBodyClasses('scrolling')
593-
wrapper.unmount()
594-
615+
waitForClassesCleanup(done, () => {
595616
assertBodyClasses('scrolling', false)
596-
done()
597617
})
598618
})
599619
})

0 commit comments

Comments
 (0)