Add ReactDOMClient to ServerIntegration tests (minor fixes)

Author: rickhanlonii

packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js

@@ -15,6 +15,7 @@ const ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactTestUtils;
 let ReactDOMServer;
 
@@ -23,12 +24,13 @@ function initModules() {
   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');
 
   // Make them available to the helpers.
   return {
-    ReactDOM,
+    ReactDOMClient,
     ReactDOMServer,
     ReactTestUtils,
   };
@@ -606,7 +608,12 @@ describe('ReactDOMServerIntegration', () => {
         // DOM nodes on the client side. We force it to fire early
         // so that it gets deduplicated later, and doesn't fail the test.
         expect(() => {
-          ReactDOM.render(<nonstandard />, document.createElement('div'));
+          ReactDOM.flushSync(() => {
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
+            root.render(<nonstandard />);
+          });
         }).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
 
         const e = await render(<nonstandard foo="bar" />);

packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.js

@@ -16,6 +16,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 
@@ -34,12 +35,13 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
     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');
 
     // Make them available to the helpers.
     return {
-      ReactDOM,
+      ReactDOMClient,
       ReactDOMServer,
       ReactTestUtils,
     };
@@ -169,9 +171,14 @@ describe('ReactDOMServerIntegration - Untrusted URLs', () => {
 
   it('rejects a javascript protocol href if it is added during an update', () => {
     const container = document.createElement('div');
-    ReactDOM.render(<a href="thisisfine">click me</a>, container);
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<a href="thisisfine">click me</a>);
+    });
     expect(() => {
-      ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
+      ReactDOM.flushSync(() => {
+        root.render(<a href="javascript:notfine">click me</a>);
+      });
     }).toErrorDev(
       'Warning: A future version of React will block javascript: URLs as a security precaution. ' +
         'Use event handlers instead if you can. If you need to generate unsafe HTML try using ' +
@@ -196,12 +203,13 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     ReactTestUtils = require('react-dom/test-utils');
 
     // Make them available to the helpers.
     return {
-      ReactDOM,
+      ReactDOMClient,
       ReactDOMServer,
       ReactTestUtils,
     };
@@ -327,9 +335,14 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
 
   it('rejects a javascript protocol href if it is added during an update', () => {
     const container = document.createElement('div');
-    ReactDOM.render(<a href="http://thisisfine/">click me</a>, container);
-    expect(container.firstChild.href).toBe('http://thisisfine/');
-    ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<a href="thisisfine">click me</a>);
+    });
+    expect(container.firstChild.href).toBe('http://localhost/thisisfine');
+    ReactDOM.flushSync(() => {
+      root.render(<a href="javascript:notfine">click me</a>);
+    });
     expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
   });
 
@@ -371,13 +384,20 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
 
   it('rejects a javascript protocol href if it is added during an update twice', () => {
     const container = document.createElement('div');
-    ReactDOM.render(<a href="http://thisisfine/">click me</a>, container);
+    const root = ReactDOMClient.createRoot(container);
+    ReactDOM.flushSync(() => {
+      root.render(<a href="http://thisisfine/">click me</a>);
+    });
     expect(container.firstChild.href).toBe('http://thisisfine/');
-    ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
+    ReactDOM.flushSync(() => {
+      root.render(<a href="javascript:notfine">click me</a>);
+    });
     expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
     // The second update ensures that a global flag hasn't been added to the regex
     // which would fail to match the second time it is called.
-    ReactDOM.render(<a href="javascript:notfine">click me</a>, container);
+    ReactDOM.flushSync(() => {
+      root.render(<a href="javascript:notfine">click me</a>);
+    });
     expect(container.firstChild.href).toBe(EXPECTED_SAFE_URL);
   });
 });