From 62208bee5ad7e447d42459ace8c0edcb7c4f9197 Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <rdlesyutin@gmail.com>
Date: Thu, 2 Jan 2025 14:07:21 +0000
Subject: [PATCH] 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.
---
 .../FastRefreshDevToolsIntegration-test.js    | 77 ++++++++++++++++++-
 packages/react-devtools-shared/src/hook.js    |  1 +
 2 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
index ff07f0ef16f8a..a80a11fde12d4 100644
--- a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
+++ b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
@@ -186,8 +186,83 @@ describe('Fast Refresh', () => {
     expect(getContainer().firstChild).not.toBe(element);
   });
 
+  // @reactVersion < 18.0
   // @reactVersion >= 16.9
-  it('should not break when there are warnings in between patching', () => {
+  it('should not break when there are warnings in between patching (before post commit hook)', () => {
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      render(`
+      const {useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 2
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        useEffect(() => {
+          console.error("Expected: error during effect");
+        });
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected: warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+  });
+
+  // @reactVersion >= 18.0
+  it('should not break when there are warnings in between patching (with post commit hook)', () => {
     withErrorsOrWarningsIgnored(['Expected:'], () => {
       render(`
       const {useState} = React;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index d754140f96541..699d23094571b 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -648,6 +648,7 @@ export function installHook(
     checkDCE,
     onCommitFiberUnmount,
     onCommitFiberRoot,
+    // React v18.0+
     onPostCommitFiberRoot,
     setStrictMode,