@@ -17,7 +17,8 @@ if (global.window) {
17
17
18
18
// The issue only reproduced when React was loaded before JSDOM.
19
19
const React = require ( 'react' ) ;
20
- const ReactDOM = require ( 'react-dom' ) ;
20
+ const ReactDOMClient = require ( 'react-dom/client' ) ;
21
+ const act = require ( 'internal-test-utils' ) . act ;
21
22
22
23
// Initialize JSDOM separately.
23
24
// We don't use our normal JSDOM setup because we want to load React first.
@@ -43,13 +44,6 @@ describe('ReactErrorLoggingRecovery', () => {
43
44
44
45
beforeEach ( ( ) => {
45
46
console . error = error => {
46
- if (
47
- typeof error === 'string' &&
48
- error . includes ( 'ReactDOM.render is no longer supported in React 18' )
49
- ) {
50
- // Ignore legacy root deprecation warning
51
- return ;
52
- }
53
47
throw new Error ( 'Buggy console.error' ) ;
54
48
} ;
55
49
} ) ;
@@ -58,23 +52,23 @@ describe('ReactErrorLoggingRecovery', () => {
58
52
console . error = originalConsoleError ;
59
53
} ) ;
60
54
61
- it ( 'should recover from errors in console.error' , function ( ) {
55
+ it ( 'should recover from errors in console.error' , async function ( ) {
62
56
const div = document . createElement ( 'div' ) ;
63
- let didCatch = false ;
64
- try {
65
- ReactDOM . render ( < Bad /> , div ) ;
66
- ReactDOM . render ( < Bad /> , div ) ;
67
- } catch ( e ) {
68
- expect ( e . message ) . toBe ( 'no' ) ;
69
- didCatch = true ;
70
- }
71
- expect ( didCatch ) . toBe ( true ) ;
72
- ReactDOM . render ( < span > Hello</ span > , div ) ;
73
- expect ( div . firstChild . textContent ) . toBe ( 'Hello' ) ;
57
+ const root = ReactDOMClient . createRoot ( div ) ;
58
+ await expect ( async ( ) => {
59
+ await act ( ( ) => {
60
+ root . render ( < Bad /> ) ;
61
+ } ) ;
62
+ await act ( ( ) => {
63
+ root . render ( < Bad /> ) ;
64
+ } ) ;
65
+ } ) . rejects . toThrow ( 'no' ) ;
74
66
75
- // Verify the console.error bug is surfaced
76
- expect ( ( ) => {
77
- jest . runAllTimers ( ) ;
78
- } ) . toThrow ( 'Buggy console.error' ) ;
67
+ await expect ( async ( ) => {
68
+ await act ( ( ) => {
69
+ root . render ( < span > Hello</ span > ) ;
70
+ } ) ;
71
+ } ) . rejects . toThrow ( 'Buggy console.error' ) ;
72
+ expect ( div . firstChild . textContent ) . toBe ( 'Hello' ) ;
79
73
} ) ;
80
74
} ) ;
0 commit comments