Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ba24a4b

Browse files
authored
fix: Resolve warning using the wrong react-dom entrypoint (#1018)
BREAKING CHANGE: Drop support for React < 18.0.0-rc.1
1 parent 1ba40c9 commit ba24a4b

File tree

9 files changed

+73
-446
lines changed

9 files changed

+73
-446
lines changed

‎.github/workflows/validate.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ on:
1212
pull_request: {}
1313
jobs:
1414
main:
15-
continue-on-error: ${{ matrix.react != 'latest' }}
15+
continue-on-error: ${{ matrix.react != 'current' }}
1616
# ignore all-contributors PRs
1717
if: ${{ !contains(github.head_ref, 'all-contributors') }}
1818
strategy:
1919
fail-fast: false
2020
matrix:
2121
# 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
2222
node: [12, 14, '16.9.1']
23-
react: [latest, next, experimental]
23+
react: [current, next, experimental]
2424
runs-on: ubuntu-latest
2525
steps:
2626
- name: 🛑 Cancel Previous Runs
@@ -47,6 +47,7 @@ jobs:
4747
# https://reactjs.org/blog/2019/10/22/react-release-channels.html#using-the-next-channel-for-integration-testing
4848
- name: ⚛️ Setup react
4949
run: npm install react@${{ matrix.react }} react-dom@${{ matrix.react }}
50+
if: ${{ matrix.react != 'current' }}
5051

5152
- name: ▶️ Run validate script
5253
run: npm run validate

‎jest.config.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,14 @@
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-rc.1",
58+
"react-dom": "18.0.0-rc.1",
5959
"rimraf": "^3.0.2",
6060
"typescript": "^4.1.2"
6161
},
6262
"peerDependencies": {
63-
"react": "*",
64-
"react-dom": "*"
63+
"react": "18.0.0-rc.1",
64+
"react-dom": "18.0.0-rc.1"
6565
},
6666
"eslintConfig": {
6767
"extends": "./node_modules/kcd-scripts/eslint.js",

‎src/__tests__/new-act.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ jest.mock('react-dom/test-utils', () => ({
88

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

‎src/__tests__/no-act.js‎

Lines changed: 0 additions & 100 deletions
This file was deleted.

‎src/__tests__/old-act.js‎

Lines changed: 0 additions & 142 deletions
This file was deleted.

‎src/__tests__/render.js‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -109,23 +109,6 @@ test('flushes useEffect cleanup functions sync on unmount()', () => {
109109
expect(spy).toHaveBeenCalledTimes(1)
110110
})
111111

112-
test('throws if `legacyRoot: false` is used with an incomaptible version', () => {
113-
const isConcurrentReact = typeof ReactDOM.createRoot === 'function'
114-
115-
const performConcurrentRender = () => render(<div />, {legacyRoot: false})
116-
117-
// eslint-disable-next-line jest/no-if -- jest doesn't support conditional tests
118-
if (isConcurrentReact) {
119-
// eslint-disable-next-line jest/no-conditional-expect -- yes, jest still doesn't support conditional tests
120-
expect(performConcurrentRender).not.toThrow()
121-
} else {
122-
// eslint-disable-next-line jest/no-conditional-expect -- yes, jest still doesn't support conditional tests
123-
expect(performConcurrentRender).toThrowError(
124-
`Attempted to use concurrent React with \`react-dom@${ReactDOM.version}\`. Be sure to use the \`next\` or \`experimental\` release channel (https://reactjs.org/docs/release-channels.html).`,
125-
)
126-
}
127-
})
128-
129112
test('can be called multiple times on the same container', () => {
130113
const container = document.createElement('div')
131114

@@ -168,3 +151,47 @@ test('hydrate will make the UI interactive', () => {
168151

169152
expect(container).toHaveTextContent('clicked:1')
170153
})
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+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /