Skip to content

Commit ccd8a0d

Browse files
eps1lonph-fritsche
eps1lon
and
ph-fritsche
authoredMar 31, 2022
feat: Add support for React 18 (#1031)
BREAKING CHANGE: Drop support for React 17 and earlier. We'll use the new [`createRoot` API](reactwg/react-18#5) by default which comes with a set of [changes while also enabling support for concurrent features](reactwg/react-18#4). To can opt-out of this change by using `render(ui, { legacyRoot: true } )`. But be aware that the legacy root API is deprecated in React 18 and its usage will trigger console warnings. Co-authored-by: Philipp Fritsche <ph.fritsche@gmail.com>
·
v16.3.0v13.0.0
1 parent 0c4aabe commit ccd8a0d

14 files changed

+370
-444
lines changed
 

‎.github/workflows/validate.yml

+3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ jobs:
1616
# ignore all-contributors PRs
1717
if: ${{ !contains(github.head_ref, 'all-contributors') }}
1818
strategy:
19+
fail-fast: false
1920
matrix:
2021
# TODO: relax `'16.9.1'` to `16` once GitHub has 16.9.1 cached. 16.9.0 is broken due to https://github.com/nodejs/node/issues/40030
2122
node: [12, 14, '16.9.1']
@@ -52,6 +53,8 @@ jobs:
5253

5354
- name: ⬆️ Upload coverage report
5455
uses: codecov/codecov-action@v1
56+
with:
57+
flags: ${{ matrix.react }}
5558

5659
release:
5760
needs: main

‎package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -46,22 +46,22 @@
4646
"license": "MIT",
4747
"dependencies": {
4848
"@babel/runtime": "^7.12.5",
49-
"@testing-library/dom": "^8.0.0",
49+
"@testing-library/dom": "^8.5.0",
5050
"@types/react-dom": "*"
5151
},
5252
"devDependencies": {
5353
"@testing-library/jest-dom": "^5.11.6",
5454
"dotenv-cli": "^4.0.0",
5555
"kcd-scripts": "^11.1.0",
5656
"npm-run-all": "^4.1.5",
57-
"react": "^17.0.1",
58-
"react-dom": "^17.0.1",
57+
"react": "^18.0.0",
58+
"react-dom": "^18.0.0",
5959
"rimraf": "^3.0.2",
6060
"typescript": "^4.1.2"
6161
},
6262
"peerDependencies": {
63-
"react": "*",
64-
"react-dom": "*"
63+
"react": "^18.0.0",
64+
"react-dom": "^18.0.0"
6565
},
6666
"eslintConfig": {
6767
"extends": "./node_modules/kcd-scripts/eslint.js",

‎src/__tests__/act.js

+25-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import {render, fireEvent, screen} from '../'
2+
import {act, render, fireEvent, screen} from '../'
33

44
test('render calls useEffect immediately', () => {
55
const effectCb = jest.fn()
@@ -43,3 +43,27 @@ test('calls to hydrate will run useEffects', () => {
4343
render(<MyUselessComponent />, {hydrate: true})
4444
expect(effectCb).toHaveBeenCalledTimes(1)
4545
})
46+
47+
test('cleans up IS_REACT_ACT_ENVIRONMENT if its callback throws', () => {
48+
global.IS_REACT_ACT_ENVIRONMENT = false
49+
50+
expect(() =>
51+
act(() => {
52+
throw new Error('threw')
53+
}),
54+
).toThrow('threw')
55+
56+
expect(global.IS_REACT_ACT_ENVIRONMENT).toEqual(false)
57+
})
58+
59+
test('cleans up IS_REACT_ACT_ENVIRONMENT if its async callback throws', async () => {
60+
global.IS_REACT_ACT_ENVIRONMENT = false
61+
62+
await expect(() =>
63+
act(async () => {
64+
throw new Error('thenable threw')
65+
}),
66+
).rejects.toThrow('thenable threw')
67+
68+
expect(global.IS_REACT_ACT_ENVIRONMENT).toEqual(false)
69+
})

‎src/__tests__/cleanup.js

+5-14
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,7 @@ describe('fake timers and missing act warnings', () => {
8383
expect(microTaskSpy).toHaveBeenCalledTimes(0)
8484
// console.error is mocked
8585
// eslint-disable-next-line no-console
86-
expect(console.error).toHaveBeenCalledTimes(
87-
// ReactDOM.render is deprecated in React 18
88-
React.version.startsWith('18') ? 1 : 0,
89-
)
86+
expect(console.error).toHaveBeenCalledTimes(0)
9087
})
9188

9289
test('cleanup does not swallow missing act warnings', () => {
@@ -118,16 +115,10 @@ describe('fake timers and missing act warnings', () => {
118115
expect(deferredStateUpdateSpy).toHaveBeenCalledTimes(1)
119116
// console.error is mocked
120117
// eslint-disable-next-line no-console
121-
expect(console.error).toHaveBeenCalledTimes(
122-
// ReactDOM.render is deprecated in React 18
123-
React.version.startsWith('18') ? 2 : 1,
124-
)
118+
expect(console.error).toHaveBeenCalledTimes(1)
125119
// eslint-disable-next-line no-console
126-
expect(
127-
console.error.mock.calls[
128-
// ReactDOM.render is deprecated in React 18
129-
React.version.startsWith('18') ? 1 : 0
130-
][0],
131-
).toMatch('a test was not wrapped in act(...)')
120+
expect(console.error.mock.calls[0][0]).toMatch(
121+
'a test was not wrapped in act(...)',
122+
)
132123
})
133124
})

‎src/__tests__/new-act.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
let asyncAct, consoleErrorMock
1+
let asyncAct
22

33
jest.mock('react-dom/test-utils', () => ({
44
act: cb => {
@@ -8,12 +8,12 @@ jest.mock('react-dom/test-utils', () => ({
88

99
beforeEach(() => {
1010
jest.resetModules()
11-
asyncAct = require('../act-compat').asyncAct
12-
consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
11+
asyncAct = require('../act-compat').default
12+
jest.spyOn(console, 'error').mockImplementation(() => {})
1313
})
1414

1515
afterEach(() => {
16-
consoleErrorMock.mockRestore()
16+
console.error.mockRestore()
1717
})
1818

1919
test('async act works when it does not exist (older versions of react)', async () => {

‎src/__tests__/no-act.js

-92
This file was deleted.

‎src/__tests__/old-act.js

-142
This file was deleted.

‎src/__tests__/render.js

+95-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import * as React from 'react'
22
import ReactDOM from 'react-dom'
3-
import {render, screen} from '../'
3+
import ReactDOMServer from 'react-dom/server'
4+
import {fireEvent, render, screen} from '../'
5+
6+
afterEach(() => {
7+
if (console.error.mockRestore !== undefined) {
8+
console.error.mockRestore()
9+
}
10+
})
411

512
test('renders div into document', () => {
613
const ref = React.createRef()
@@ -101,3 +108,90 @@ test('flushes useEffect cleanup functions sync on unmount()', () => {
101108

102109
expect(spy).toHaveBeenCalledTimes(1)
103110
})
111+
112+
test('can be called multiple times on the same container', () => {
113+
const container = document.createElement('div')
114+
115+
const {unmount} = render(<strong />, {container})
116+
117+
expect(container).toContainHTML('<strong></strong>')
118+
119+
render(<em />, {container})
120+
121+
expect(container).toContainHTML('<em></em>')
122+
123+
unmount()
124+
125+
expect(container).toBeEmptyDOMElement()
126+
})
127+
128+
test('hydrate will make the UI interactive', () => {
129+
jest.spyOn(console, 'error').mockImplementation(() => {})
130+
function App() {
131+
const [clicked, handleClick] = React.useReducer(n => n + 1, 0)
132+
133+
return (
134+
<button type="button" onClick={handleClick}>
135+
clicked:{clicked}
136+
</button>
137+
)
138+
}
139+
const ui = <App />
140+
const container = document.createElement('div')
141+
document.body.appendChild(container)
142+
container.innerHTML = ReactDOMServer.renderToString(ui)
143+
144+
expect(container).toHaveTextContent('clicked:0')
145+
146+
render(ui, {container, hydrate: true})
147+
148+
expect(console.error).not.toHaveBeenCalled()
149+
150+
fireEvent.click(container.querySelector('button'))
151+
152+
expect(container).toHaveTextContent('clicked:1')
153+
})
154+
155+
test('hydrate can have a wrapper', () => {
156+
const wrapperComponentMountEffect = jest.fn()
157+
function WrapperComponent({children}) {
158+
React.useEffect(() => {
159+
wrapperComponentMountEffect()
160+
})
161+
162+
return children
163+
}
164+
const ui = <div />
165+
const container = document.createElement('div')
166+
document.body.appendChild(container)
167+
container.innerHTML = ReactDOMServer.renderToString(ui)
168+
169+
render(ui, {container, hydrate: true, wrapper: WrapperComponent})
170+
171+
expect(wrapperComponentMountEffect).toHaveBeenCalledTimes(1)
172+
})
173+
174+
test('legacyRoot uses legacy ReactDOM.render', () => {
175+
jest.spyOn(console, 'error').mockImplementation(() => {})
176+
render(<div />, {legacyRoot: true})
177+
178+
expect(console.error).toHaveBeenCalledTimes(1)
179+
expect(console.error).toHaveBeenNthCalledWith(
180+
1,
181+
"Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
182+
)
183+
})
184+
185+
test('legacyRoot uses legacy ReactDOM.hydrate', () => {
186+
jest.spyOn(console, 'error').mockImplementation(() => {})
187+
const ui = <div />
188+
const container = document.createElement('div')
189+
container.innerHTML = ReactDOMServer.renderToString(ui)
190+
render(ui, {container, hydrate: true, legacyRoot: true})
191+
192+
expect(console.error).toHaveBeenCalledTimes(1)
193+
expect(console.error).toHaveBeenNthCalledWith(
194+
1,
195+
"Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot",
196+
)
197+
})

‎src/__tests__/stopwatch.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,5 @@ test('unmounts a component', async () => {
5353
// and get an error.
5454
await sleep(5)
5555
// eslint-disable-next-line no-console
56-
expect(console.error).toHaveBeenCalledTimes(
57-
// ReactDOM.render is deprecated in React 18
58-
React.version.startsWith('18') ? 1 : 0,
59-
)
56+
expect(console.error).not.toHaveBeenCalled()
6057
})

‎src/act-compat.js

+68-118
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,85 @@
1-
import * as React from 'react'
2-
import ReactDOM from 'react-dom'
31
import * as testUtils from 'react-dom/test-utils'
42

5-
const reactAct = testUtils.act
6-
const actSupported = reactAct !== undefined
3+
const domAct = testUtils.act
74

8-
// act is supported react-dom@16.8.0
9-
// so for versions that don't have act from test utils
10-
// we do this little polyfill. No warnings, but it's
11-
// better than nothing.
12-
function actPolyfill(cb) {
13-
ReactDOM.unstable_batchedUpdates(cb)
14-
ReactDOM.render(<div />, document.createElement('div'))
5+
function getGlobalThis() {
6+
/* istanbul ignore else */
7+
if (typeof self !== 'undefined') {
8+
return self
9+
}
10+
/* istanbul ignore next */
11+
if (typeof window !== 'undefined') {
12+
return window
13+
}
14+
/* istanbul ignore next */
15+
if (typeof global !== 'undefined') {
16+
return global
17+
}
18+
/* istanbul ignore next */
19+
throw new Error('unable to locate global object')
1520
}
1621

17-
const act = reactAct || actPolyfill
22+
function setIsReactActEnvironment(isReactActEnvironment) {
23+
getGlobalThis().IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment
24+
}
1825

19-
let youHaveBeenWarned = false
20-
let isAsyncActSupported = null
26+
function getIsReactActEnvironment() {
27+
return getGlobalThis().IS_REACT_ACT_ENVIRONMENT
28+
}
2129

22-
function asyncAct(cb) {
23-
if (actSupported === true) {
24-
if (isAsyncActSupported === null) {
25-
return new Promise((resolve, reject) => {
26-
// patch console.error here
27-
const originalConsoleError = console.error
28-
console.error = function error(...args) {
29-
/* if console.error fired *with that specific message* */
30-
/* istanbul ignore next */
31-
const firstArgIsString = typeof args[0] === 'string'
32-
if (
33-
firstArgIsString &&
34-
args[0].indexOf(
35-
'Warning: Do not await the result of calling ReactTestUtils.act',
36-
) === 0
37-
) {
38-
// v16.8.6
39-
isAsyncActSupported = false
40-
} else if (
41-
firstArgIsString &&
42-
args[0].indexOf(
43-
'Warning: The callback passed to ReactTestUtils.act(...) function must not return anything',
44-
) === 0
45-
) {
46-
// no-op
47-
} else {
48-
originalConsoleError.apply(console, args)
49-
}
30+
function withGlobalActEnvironment(actImplementation) {
31+
return callback => {
32+
const previousActEnvironment = getIsReactActEnvironment()
33+
setIsReactActEnvironment(true)
34+
try {
35+
// The return value of `act` is always a thenable.
36+
let callbackNeedsToBeAwaited = false
37+
const actResult = actImplementation(() => {
38+
const result = callback()
39+
if (
40+
result !== null &&
41+
typeof result === 'object' &&
42+
typeof result.then === 'function'
43+
) {
44+
callbackNeedsToBeAwaited = true
5045
}
51-
let cbReturn, result
52-
try {
53-
result = reactAct(() => {
54-
cbReturn = cb()
55-
return cbReturn
56-
})
57-
} catch (err) {
58-
console.error = originalConsoleError
59-
reject(err)
60-
return
61-
}
62-
63-
result.then(
64-
() => {
65-
console.error = originalConsoleError
66-
// if it got here, it means async act is supported
67-
isAsyncActSupported = true
68-
resolve()
69-
},
70-
err => {
71-
console.error = originalConsoleError
72-
isAsyncActSupported = true
73-
reject(err)
74-
},
75-
)
76-
77-
// 16.8.6's act().then() doesn't call a resolve handler, so we need to manually flush here, sigh
78-
79-
if (isAsyncActSupported === false) {
80-
console.error = originalConsoleError
81-
/* istanbul ignore next */
82-
if (!youHaveBeenWarned) {
83-
// if act is supported and async act isn't and they're trying to use async
84-
// act, then they need to upgrade from 16.8 to 16.9.
85-
// This is a seamless upgrade, so we'll add a warning
86-
console.error(
87-
`It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least react-dom@16.9.0 to remove this warning.`,
46+
return result
47+
})
48+
if (callbackNeedsToBeAwaited) {
49+
const thenable = actResult
50+
return {
51+
then: (resolve, reject) => {
52+
thenable.then(
53+
returnValue => {
54+
setIsReactActEnvironment(previousActEnvironment)
55+
resolve(returnValue)
56+
},
57+
error => {
58+
setIsReactActEnvironment(previousActEnvironment)
59+
reject(error)
60+
},
8861
)
89-
youHaveBeenWarned = true
90-
}
91-
92-
cbReturn.then(() => {
93-
// a faux-version.
94-
// todo - copy https://github.com/facebook/react/blob/master/packages/shared/enqueueTask.js
95-
Promise.resolve().then(() => {
96-
// use sync act to flush effects
97-
act(() => {})
98-
resolve()
99-
})
100-
}, reject)
62+
},
10163
}
102-
})
103-
} else if (isAsyncActSupported === false) {
104-
// use the polyfill directly
105-
let result
106-
act(() => {
107-
result = cb()
108-
})
109-
return result.then(() => {
110-
return Promise.resolve().then(() => {
111-
// use sync act to flush effects
112-
act(() => {})
113-
})
114-
})
64+
} else {
65+
setIsReactActEnvironment(previousActEnvironment)
66+
return actResult
67+
}
68+
} catch (error) {
69+
// Can't be a `finally {}` block since we don't know if we have to immediately restore IS_REACT_ACT_ENVIRONMENT
70+
// or if we have to await the callback first.
71+
setIsReactActEnvironment(previousActEnvironment)
72+
throw error
11573
}
116-
// all good! regular act
117-
return act(cb)
11874
}
119-
// use the polyfill
120-
let result
121-
act(() => {
122-
result = cb()
123-
})
124-
return result.then(() => {
125-
return Promise.resolve().then(() => {
126-
// use sync act to flush effects
127-
act(() => {})
128-
})
129-
})
13075
}
13176

77+
const act = withGlobalActEnvironment(domAct)
78+
13279
export default act
133-
export {asyncAct}
80+
export {
81+
setIsReactActEnvironment as setReactActEnvironment,
82+
getIsReactActEnvironment,
83+
}
13484

13585
/* eslint no-console:0 */

‎src/index.js

+16
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {getIsReactActEnvironment, setReactActEnvironment} from './act-compat'
12
import {cleanup} from './pure'
23

34
// if we're running in a test runner that supports afterEach
@@ -20,6 +21,21 @@ if (typeof process === 'undefined' || !process.env?.RTL_SKIP_AUTO_CLEANUP) {
2021
cleanup()
2122
})
2223
}
24+
25+
// No test setup with other test runners available
26+
/* istanbul ignore else */
27+
if (typeof beforeAll === 'function' && typeof afterAll === 'function') {
28+
// This matches the behavior of React < 18.
29+
let previousIsReactActEnvironment = getIsReactActEnvironment()
30+
beforeAll(() => {
31+
previousIsReactActEnvironment = getIsReactActEnvironment()
32+
setReactActEnvironment(true)
33+
})
34+
35+
afterAll(() => {
36+
setReactActEnvironment(previousIsReactActEnvironment)
37+
})
38+
}
2339
}
2440

2541
export * from './pure'

‎src/pure.js

+143-44
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
11
import * as React from 'react'
22
import ReactDOM from 'react-dom'
3+
import * as ReactDOMClient from 'react-dom/client'
34
import {
45
getQueriesForElement,
56
prettyDOM,
67
configure as configureDTL,
78
} from '@testing-library/dom'
8-
import act, {asyncAct} from './act-compat'
9+
import act, {
10+
getIsReactActEnvironment,
11+
setReactActEnvironment,
12+
} from './act-compat'
913
import {fireEvent} from './fire-event'
1014

1115
configureDTL({
16+
unstable_advanceTimersWrapper: cb => {
17+
return act(cb)
18+
},
19+
// We just want to run `waitFor` without IS_REACT_ACT_ENVIRONMENT
20+
// But that's not necessarily how `asyncWrapper` is used since it's a public method.
21+
// Let's just hope nobody else is using it.
1222
asyncWrapper: async cb => {
13-
let result
14-
await asyncAct(async () => {
15-
result = await cb()
16-
})
17-
return result
23+
const previousActEnvironment = getIsReactActEnvironment()
24+
setReactActEnvironment(false)
25+
try {
26+
return await cb()
27+
} finally {
28+
setReactActEnvironment(previousActEnvironment)
29+
}
1830
},
1931
eventWrapper: cb => {
2032
let result
@@ -25,42 +37,80 @@ configureDTL({
2537
},
2638
})
2739

40+
// Ideally we'd just use a WeakMap where containers are keys and roots are values.
41+
// We use two variables so that we can bail out in constant time when we render with a new container (most common use case)
42+
/**
43+
* @type {Set<import('react-dom').Container>}
44+
*/
2845
const mountedContainers = new Set()
46+
/**
47+
* @type Array<{container: import('react-dom').Container, root: ReturnType<typeof createConcurrentRoot>}>
48+
*/
49+
const mountedRootEntries = []
2950

30-
function render(
31-
ui,
32-
{
33-
container,
34-
baseElement = container,
35-
queries,
36-
hydrate = false,
37-
wrapper: WrapperComponent,
38-
} = {},
51+
function createConcurrentRoot(
52+
container,
53+
{hydrate, ui, wrapper: WrapperComponent},
3954
) {
40-
if (!baseElement) {
41-
// default to document.body instead of documentElement to avoid output of potentially-large
42-
// head elements (such as JSS style blocks) in debug output
43-
baseElement = document.body
55+
let root
56+
if (hydrate) {
57+
act(() => {
58+
root = ReactDOMClient.hydrateRoot(
59+
container,
60+
WrapperComponent ? React.createElement(WrapperComponent, null, ui) : ui,
61+
)
62+
})
63+
} else {
64+
root = ReactDOMClient.createRoot(container)
4465
}
45-
if (!container) {
46-
container = baseElement.appendChild(document.createElement('div'))
66+
67+
return {
68+
hydrate() {
69+
/* istanbul ignore if */
70+
if (!hydrate) {
71+
throw new Error(
72+
'Attempted to hydrate a non-hydrateable root. This is a bug in `@testing-library/react`.',
73+
)
74+
}
75+
// Nothing to do since hydration happens when creating the root object.
76+
},
77+
render(element) {
78+
root.render(element)
79+
},
80+
unmount() {
81+
root.unmount()
82+
},
4783
}
84+
}
4885

49-
// we'll add it to the mounted containers regardless of whether it's actually
50-
// added to document.body so the cleanup method works regardless of whether
51-
// they're passing us a custom container or not.
52-
mountedContainers.add(container)
86+
function createLegacyRoot(container) {
87+
return {
88+
hydrate(element) {
89+
ReactDOM.hydrate(element, container)
90+
},
91+
render(element) {
92+
ReactDOM.render(element, container)
93+
},
94+
unmount() {
95+
ReactDOM.unmountComponentAtNode(container)
96+
},
97+
}
98+
}
5399

100+
function renderRoot(
101+
ui,
102+
{baseElement, container, hydrate, queries, root, wrapper: WrapperComponent},
103+
) {
54104
const wrapUiIfNeeded = innerElement =>
55105
WrapperComponent
56106
? React.createElement(WrapperComponent, null, innerElement)
57107
: innerElement
58108

59109
act(() => {
60110
if (hydrate) {
61-
ReactDOM.hydrate(wrapUiIfNeeded(ui), container)
111+
root.hydrate(wrapUiIfNeeded(ui), container)
62112
} else {
63-
ReactDOM.render(wrapUiIfNeeded(ui), container)
113+
root.render(wrapUiIfNeeded(ui), container)
64114
}
65115
})
66116

@@ -75,11 +125,15 @@ function render(
75125
console.log(prettyDOM(el, maxLength, options)),
76126
unmount: () => {
77127
act(() => {
78-
ReactDOM.unmountComponentAtNode(container)
128+
root.unmount()
79129
})
80130
},
81131
rerender: rerenderUi => {
82-
render(wrapUiIfNeeded(rerenderUi), {container, baseElement})
132+
renderRoot(wrapUiIfNeeded(rerenderUi), {
133+
container,
134+
baseElement,
135+
root,
136+
})
83137
// Intentionally do not return anything to avoid unnecessarily complicating the API.
84138
// folks can use all the same utilities we return in the first place that are bound to the container
85139
},
@@ -99,28 +153,73 @@ function render(
99153
}
100154
}
101155

102-
function cleanup() {
103-
mountedContainers.forEach(cleanupAtContainer)
156+
function render(
157+
ui,
158+
{
159+
container,
160+
baseElement = container,
161+
legacyRoot = false,
162+
queries,
163+
hydrate = false,
164+
wrapper,
165+
} = {},
166+
) {
167+
if (!baseElement) {
168+
// default to document.body instead of documentElement to avoid output of potentially-large
169+
// head elements (such as JSS style blocks) in debug output
170+
baseElement = document.body
171+
}
172+
if (!container) {
173+
container = baseElement.appendChild(document.createElement('div'))
174+
}
175+
176+
let root
177+
// eslint-disable-next-line no-negated-condition -- we want to map the evolution of this over time. The root is created first. Only later is it re-used so we don't want to read the case that happens later first.
178+
if (!mountedContainers.has(container)) {
179+
const createRootImpl = legacyRoot ? createLegacyRoot : createConcurrentRoot
180+
root = createRootImpl(container, {hydrate, ui, wrapper})
181+
182+
mountedRootEntries.push({container, root})
183+
// we'll add it to the mounted containers regardless of whether it's actually
184+
// added to document.body so the cleanup method works regardless of whether
185+
// they're passing us a custom container or not.
186+
mountedContainers.add(container)
187+
} else {
188+
mountedRootEntries.forEach(rootEntry => {
189+
// Else is unreachable since `mountedContainers` has the `container`.
190+
// Only reachable if one would accidentally add the container to `mountedContainers` but not the root to `mountedRootEntries`
191+
/* istanbul ignore else */
192+
if (rootEntry.container === container) {
193+
root = rootEntry.root
194+
}
195+
})
196+
}
197+
198+
return renderRoot(ui, {
199+
container,
200+
baseElement,
201+
queries,
202+
hydrate,
203+
wrapper,
204+
root,
205+
})
104206
}
105207

106-
// maybe one day we'll expose this (perhaps even as a utility returned by render).
107-
// but let's wait until someone asks for it.
108-
function cleanupAtContainer(container) {
109-
act(() => {
110-
ReactDOM.unmountComponentAtNode(container)
208+
function cleanup() {
209+
mountedRootEntries.forEach(({root, container}) => {
210+
act(() => {
211+
root.unmount()
212+
})
213+
if (container.parentNode === document.body) {
214+
document.body.removeChild(container)
215+
}
111216
})
112-
if (container.parentNode === document.body) {
113-
document.body.removeChild(container)
114-
}
115-
mountedContainers.delete(container)
217+
mountedRootEntries.length = 0
218+
mountedContainers.clear()
116219
}
117220

118221
// just re-export everything from dom-testing-library
119222
export * from '@testing-library/dom'
120223
export {render, cleanup, act, fireEvent}
121224

122-
// NOTE: we're not going to export asyncAct because that's our own compatibility
123-
// thing for people using react-dom@16.8.0. Anyone else doesn't need it and
124-
// people should just upgrade anyway.
125-
126225
/* eslint func-name-matching:0 */

‎tests/setup-env.js

-19
Original file line numberDiff line numberDiff line change
@@ -1,20 +1 @@
11
import '@testing-library/jest-dom/extend-expect'
2-
3-
let consoleErrorMock
4-
5-
beforeEach(() => {
6-
const originalConsoleError = console.error
7-
consoleErrorMock = jest
8-
.spyOn(console, 'error')
9-
.mockImplementation((message, ...optionalParams) => {
10-
// Ignore ReactDOM.render/ReactDOM.hydrate deprecation warning
11-
if (message.indexOf('Use createRoot instead.') !== -1) {
12-
return
13-
}
14-
originalConsoleError(message, ...optionalParams)
15-
})
16-
})
17-
18-
afterEach(() => {
19-
consoleErrorMock.mockRestore()
20-
})

‎types/index.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,11 @@ export interface RenderOptions<
6060
* @see https://testing-library.com/docs/react-testing-library/api/#hydrate)
6161
*/
6262
hydrate?: boolean
63+
/**
64+
* Set to `true` if you want to force synchronous `ReactDOM.render`.
65+
* Otherwise `render` will default to concurrent React if available.
66+
*/
67+
legacyRoot?: boolean
6368
/**
6469
* Queries to bind. Overrides the default set from DOM Testing Library unless merged.
6570
*

0 commit comments

Comments
 (0)
Please sign in to comment.