DevTools: fork FastRefresh test for <18 versions of React (#31893)
We currently have a failing test for React DevTools against React 17. This started failing in https://github.com/facebook/react/pull/30899, where we changed logic for error tracking and started relying on `onPostCommitFiberRoot` hook. Looking at https://github.com/facebook/react/pull/21183, `onPostCommitFiberRoot` was shipped in 18, which means that any console errors / warnings emitted in passive effects won't be recorded by React DevTools for React < 18.
Ruslan Lesiutin committed
Jan 2, 2025 at 14:07 UTC
62208bee5ad7e447d42459ace8c0edcb7c4f9197
2 files changed
+77
-1
packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
+76
-1
@@ -186,8 +186,83 @@ describe('Fast Refresh', () => {
186
expect(getContainer().firstChild).not.toBe(element);
187
});
188
189
+ // @reactVersion < 18.0
190
// @reactVersion >= 16.9
190
- it('should not break when there are warnings in between patching', () => {
191
+ it('should not break when there are warnings in between patching (before post commit hook)', () => {
192
+ withErrorsOrWarningsIgnored(['Expected:'], () => {
193
+ render(`
194
+ const {useState} = React;
195
+
196
+ export default function Component() {
197
+ const [state, setState] = useState(1);
198
+ console.warn("Expected: warning during render");
199
+ return null;
200
+ }
201
+ `);
202
+ });
203
+ expect(store).toMatchInlineSnapshot(`
204
+ ✕ 0, ⚠ 1
205
+ [root]
206
+ <Component> ⚠
207
+ `);
208
+
209
+ withErrorsOrWarningsIgnored(['Expected:'], () => {
210
+ patch(`
211
+ const {useEffect, useState} = React;
212
+
213
+ export default function Component() {
214
+ const [state, setState] = useState(1);
215
+ console.warn("Expected: warning during render");
216
+ return null;
217
+ }
218
+ `);
219
+ });
220
+ expect(store).toMatchInlineSnapshot(`
221
+ ✕ 0, ⚠ 2
222
+ [root]
223
+ <Component> ⚠
224
+ `);
225
+
226
+ withErrorsOrWarningsIgnored(['Expected:'], () => {
227
+ patch(`
228
+ const {useEffect, useState} = React;
229
+
230
+ export default function Component() {
231
+ const [state, setState] = useState(1);
232
+ useEffect(() => {
233
+ console.error("Expected: error during effect");
234
+ });
235
+ console.warn("Expected: warning during render");
236
+ return null;
237
+ }
238
+ `);
239
+ });
240
+ expect(store).toMatchInlineSnapshot(`
241
+ ✕ 0, ⚠ 1
242
+ [root]
243
+ <Component> ⚠
244
+ `);
245
+
246
+ withErrorsOrWarningsIgnored(['Expected:'], () => {
247
+ patch(`
248
+ const {useEffect, useState} = React;
249
+
250
+ export default function Component() {
251
+ const [state, setState] = useState(1);
252
+ console.warn("Expected: warning during render");
253
+ return null;
254
+ }
255
+ `);
256
+ });
257
+ expect(store).toMatchInlineSnapshot(`
258
+ ✕ 0, ⚠ 1
259
+ [root]
260
+ <Component> ⚠
261
+ `);
262
+ });
263
+
264
+ // @reactVersion >= 18.0
265
+ it('should not break when there are warnings in between patching (with post commit hook)', () => {
266
withErrorsOrWarningsIgnored(['Expected:'], () => {
267
render(`
268
const {useState} = React;
packages/react-devtools-shared/src/hook.js
+1
@@ -648,6 +648,7 @@ export function installHook(
648
checkDCE,
649
onCommitFiberUnmount,
650
onCommitFiberRoot,
651
+ // React v18.0+
652
onPostCommitFiberRoot,
653
setStrictMode,
654