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 #30899,
where we changed logic for error tracking and started relying on
`onPostCommitFiberRoot` hook.

Looking at #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.

Author: hoxyq

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;

packages/react-devtools-shared/src/hook.js

@@ -648,6 +648,7 @@ export function installHook(
     checkDCE,
     onCommitFiberUnmount,
     onCommitFiberRoot,
+    // React v18.0+
     onPostCommitFiberRoot,
     setStrictMode,