From c7afaddc60a683041e17e5d48b4bdf42db24c230 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Fri, 19 Jan 2024 13:34:31 +0100
Subject: [PATCH 1/2] Convert ReactDOMOption to createRoot

---
 .../src/__tests__/ReactDOMOption-test.js      | 57 ++++++++++++++-----
 scripts/jest/matchers/toWarnDev.js            |  3 +-
 2 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index b8dc69b3f6b7d..156fc822f3944 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -11,16 +11,18 @@
 
 describe('ReactDOMOption', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let ReactDOMServer;
   let ReactTestUtils;
+  let act;
 
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     ReactTestUtils = require('react-dom/test-utils');
+    act = require('internal-test-utils').act;
   });
 
   it('should flatten children to a string', () => {
@@ -182,19 +184,28 @@ describe('ReactDOMOption', () => {
     expect(node.innerHTML).toBe('foobar');
   });
 
-  it('should set attribute for empty value', () => {
+  it('should set attribute for empty value', async () => {
     const container = document.createElement('div');
-    const option = ReactDOM.render(<option value="" />, container);
+    const root = ReactDOMClient.createRoot(container);
+    let option;
+    await act(() => {
+      root.render(<option value="" />);
+    });
+    option = container.firstChild;
     expect(option.hasAttribute('value')).toBe(true);
     expect(option.getAttribute('value')).toBe('');
 
-    ReactDOM.render(<option value="lava" />, container);
+    await act(() => {
+      root.render(<option value="lava" />);
+    });
+    option = container.firstChild;
     expect(option.hasAttribute('value')).toBe(true);
     expect(option.getAttribute('value')).toBe('lava');
   });
 
-  it('should allow ignoring `value` on option', () => {
+  it('should allow ignoring `value` on option', async () => {
     const a = 'a';
+    let node;
     const stub = (
       <select value="giraffe" onChange={() => {}}>
         <option>monkey</option>
@@ -204,15 +215,22 @@ describe('ReactDOMOption', () => {
     );
     const options = stub.props.children;
     const container = document.createElement('div');
-    const node = ReactDOM.render(stub, container);
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => {
+      root.render(stub);
+    });
+    node = container.firstChild;
 
     expect(node.selectedIndex).toBe(1);
 
-    ReactDOM.render(<select value="gorilla">{options}</select>, container);
+    await act(() => {
+      root.render(<select value="gorilla">{options}</select>);
+    });
+    node = container.firstChild;
     expect(node.selectedIndex).toEqual(2);
   });
 
-  it('generates a warning and hydration error when an invalid nested tag is used as a child', () => {
+  it('generates a warning and hydration error when an invalid nested tag is used as a child', async () => {
     const ref = React.createRef();
     const children = (
       <select readOnly={true} value="bar">
@@ -229,16 +247,27 @@ describe('ReactDOMOption', () => {
     expect(container.firstChild.getAttribute('value')).toBe(null);
     expect(container.firstChild.getAttribute('defaultValue')).toBe(null);
 
-    const option = container.firstChild.firstChild;
+    let option = container.firstChild.firstChild;
     expect(option.nodeName).toBe('OPTION');
 
     expect(option.textContent).toBe('BarFooBaz');
     expect(option.selected).toBe(true);
 
-    expect(() => ReactDOM.hydrate(children, container)).toErrorDev([
-      'Text content did not match. Server: "FooBaz" Client: "Foo"',
-      'validateDOMNesting(...): <div> cannot appear as a child of <option>.',
-    ]);
+    await expect(async () => {
+      await act(async () => {
+        ReactDOMClient.hydrateRoot(container, children);
+      });
+    }).toErrorDev(
+      [
+        'Warning: Text content did not match. Server: "FooBaz" Client: "Foo"',
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>',
+        'Warning: validateDOMNesting(...): <div> cannot appear as a child of <option>',
+        'Error: Text content does not match server-rendered HTML.',
+        'Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ],
+      {withoutStack: 1},
+    );
+    option = container.firstChild.firstChild;
 
     expect(option.textContent).toBe('BarFooBaz');
     expect(option.selected).toBe(true);
diff --git a/scripts/jest/matchers/toWarnDev.js b/scripts/jest/matchers/toWarnDev.js
index 88ae8661e9964..d61f3707b035c 100644
--- a/scripts/jest/matchers/toWarnDev.js
+++ b/scripts/jest/matchers/toWarnDev.js
@@ -86,7 +86,8 @@ const createMatcherFor = (consoleMethod, matcherName) =>
         // doesn't match the number of arguments.
         // We'll fail the test if it happens.
         let argIndex = 0;
-        format.replace(/%s/g, () => argIndex++);
+        // console.* could have been called with a non-string e.g. `console.error(new Error())`
+        String(format).replace(/%s/g, () => argIndex++);
         if (argIndex !== args.length) {
           lastWarningWithMismatchingFormat = {
             format,

From 88556a8454152a56af9dc949e8c814f80b21bf90 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Fri, 19 Jan 2024 13:43:36 +0100
Subject: [PATCH 2/2] Make toErrorDev assertion agnostic to test matrix

---
 packages/react-dom/src/__tests__/ReactDOMOption-test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index 156fc822f3944..c0597c36b20d1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -255,15 +255,15 @@ describe('ReactDOMOption', () => {
 
     await expect(async () => {
       await act(async () => {
-        ReactDOMClient.hydrateRoot(container, children);
+        ReactDOMClient.hydrateRoot(container, children, {
+          onRecoverableError: () => {},
+        });
       });
     }).toErrorDev(
       [
         'Warning: Text content did not match. Server: "FooBaz" Client: "Foo"',
         'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>',
         'Warning: validateDOMNesting(...): <div> cannot appear as a child of <option>',
-        'Error: Text content does not match server-rendered HTML.',
-        'Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
       ],
       {withoutStack: 1},
     );