Skip to content

Commit

Permalink
Add ReactDOMClient to ServerIntegrationReconnecting (#28136)
Browse files Browse the repository at this point in the history
## Overview

Branched off #28130

## Why

In #24276 we changed the new root
behavior to error when a client-render is forced for certain cases, so
these now expect a mismatch even though they're using
`suppressHydrationWarning`.
  • Loading branch information
rickhanlonii authored Feb 1, 2024
1 parent fa6674b commit 4bd5e3e
Showing 1 changed file with 98 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,30 +13,30 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio

let React;
let ReactDOM;
let ReactDOMClient;
let ReactDOMServer;
let ReactTestUtils;

function initModules() {
// Reset warning cache.
jest.resetModules();

React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');

// Make them available to the helpers.
return {
ReactDOM,
ReactDOMServer,
ReactTestUtils,
};
}

const {resetModules, expectMarkupMismatch, expectMarkupMatch} =
ReactDOMServerIntegrationUtils(initModules);

describe('ReactDOMServerIntegration', () => {
function initModules() {
// Reset warning cache.
jest.resetModules();

React = require('react');
ReactDOMClient = require('react-dom/client');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');

// Make them available to the helpers.
return {
ReactDOMClient,
ReactDOMServer,
ReactTestUtils,
};
}

const {resetModules, expectMarkupMismatch, expectMarkupMatch} =
ReactDOMServerIntegrationUtils(initModules);
beforeEach(() => {
resetModules();
});
Expand Down Expand Up @@ -123,8 +123,8 @@ describe('ReactDOMServerIntegration', () => {
it('should error reconnecting different attribute values', () =>
expectMarkupMismatch(<div id="foo" />, <div id="bar" />));

it('can explicitly ignore errors reconnecting different element types of children', () =>
expectMarkupMatch(
it('should error reconnecting different element types of children', () =>
expectMarkupMismatch(
<div>
<div />
</div>,
Expand Down Expand Up @@ -354,8 +354,8 @@ describe('ReactDOMServerIntegration', () => {
<div>{''}</div>,
));

it('can explicitly ignore reconnecting more children', () =>
expectMarkupMatch(
it('can not ignore reconnecting more children', () =>
expectMarkupMismatch(
<div>
<div />
</div>,
Expand All @@ -365,8 +365,8 @@ describe('ReactDOMServerIntegration', () => {
</div>,
));

it('can explicitly ignore reconnecting fewer children', () =>
expectMarkupMatch(
it('can not ignore reconnecting fewer children', () =>
expectMarkupMismatch(
<div>
<div />
<div />
Expand All @@ -376,8 +376,8 @@ describe('ReactDOMServerIntegration', () => {
</div>,
));

it('can explicitly ignore reconnecting reordered children', () =>
expectMarkupMatch(
it('can not ignore reconnecting reordered children', () =>
expectMarkupMismatch(
<div suppressHydrationWarning={true}>
<div />
<span />
Expand Down Expand Up @@ -456,3 +456,73 @@ describe('ReactDOMServerIntegration', () => {
));
});
});

describe('ReactDOMServerIntegration (legacy)', () => {
function initModules() {
// Reset warning cache.
jest.resetModules();

React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
ReactTestUtils = require('react-dom/test-utils');

// Make them available to the helpers.
return {
ReactDOM,
ReactDOMServer,
ReactTestUtils,
};
}

const {resetModules, expectMarkupMatch} =
ReactDOMServerIntegrationUtils(initModules);

beforeEach(() => {
resetModules();
});

it('legacy mode can explicitly ignore errors reconnecting different element types of children', () =>
expectMarkupMatch(
<div>
<div />
</div>,
<div suppressHydrationWarning={true}>
<span />
</div>,
));

it('legacy mode can explicitly ignore reconnecting more children', () =>
expectMarkupMatch(
<div>
<div />
</div>,
<div suppressHydrationWarning={true}>
<div />
<div />
</div>,
));

it('legacy mode can explicitly ignore reconnecting fewer children', () =>
expectMarkupMatch(
<div>
<div />
<div />
</div>,
<div suppressHydrationWarning={true}>
<div />
</div>,
));

it('legacy mode can explicitly ignore reconnecting reordered children', () =>
expectMarkupMatch(
<div suppressHydrationWarning={true}>
<div />
<span />
</div>,
<div suppressHydrationWarning={true}>
<span />
<div />
</div>,
));
});

0 comments on commit 4bd5e3e

Please sign in to comment.