From 6229418ac52b57917d5a727b29e0d5c97d5ee41d Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 5 Mar 2024 10:02:17 +0100 Subject: [PATCH] [react] Move ReactDOM* tests to `react-dom` (#68886) --- types/react-dom/test/react-dom-tests.tsx | 26 ++++++++++++++++++++---- types/react/package.json | 1 - types/react/test/index.ts | 18 ++-------------- types/react/ts5.0/test/index.ts | 18 ++-------------- 4 files changed, 26 insertions(+), 37 deletions(-) diff --git a/types/react-dom/test/react-dom-tests.tsx b/types/react-dom/test/react-dom-tests.tsx index 5bbb0007474576..fe164a5052a0ff 100644 --- a/types/react-dom/test/react-dom-tests.tsx +++ b/types/react-dom/test/react-dom-tests.tsx @@ -15,13 +15,26 @@ class TestComponent extends React.Component<{ x: string }> { describe("ReactDOM", () => { it("render", () => { - const rootElement = document.createElement("div"); - ReactDOM.render(React.createElement("div"), rootElement); + const container = document.createElement("div"); + ReactDOM.render(React.createElement("div"), container); ReactDOM.render(React.createElement("div"), document.createDocumentFragment()); ReactDOM.render(React.createElement("div"), document); - const instance = ReactDOM.render(React.createElement(TestComponent), rootElement); + const instance = ReactDOM.render(React.createElement(TestComponent), container); instance.someInstanceMethod(); + + const element = React.createElement(TestComponent, { x: "test" }); + const component: TestComponent = ReactDOM.render(element, container); + const componentNullContainer: TestComponent = ReactDOM.render(element, null); + const componentElementOrNull: TestComponent = ReactDOM.render(element, container); + class ModernComponentNoState extends React.Component<{ x: string }> {} + const elementNoState: React.CElement<{ x: string }, ModernComponentNoState> = React.createElement( + ModernComponentNoState, + { x: "test" }, + ); + const componentNoState: ModernComponentNoState = ReactDOM.render(elementNoState, container); + const componentNoStateElementOrNull: ModernComponentNoState = ReactDOM.render(elementNoState, container); + const domComponent: Element = ReactDOM.render(React.createElement("div"), container); }); it("hydrate", () => { @@ -40,7 +53,7 @@ describe("ReactDOM", () => { it("works with document fragments", () => { const fragment = document.createDocumentFragment(); ReactDOM.render(React.createElement("div"), fragment); - ReactDOM.unmountComponentAtNode(fragment); + const unmounted: boolean = ReactDOM.unmountComponentAtNode(fragment); }); it("find dom node", () => { @@ -49,6 +62,11 @@ describe("ReactDOM", () => { ReactDOM.findDOMNode(rootElement); ReactDOM.findDOMNode(null); ReactDOM.findDOMNode(undefined); + + const element = React.createElement(TestComponent, { x: "test" }); + const component: TestComponent = ReactDOM.render(element, document.createElement("div")); + let domNode = ReactDOM.findDOMNode(component); + domNode = ReactDOM.findDOMNode(domNode as Element); }); it("createPortal", () => { diff --git a/types/react/package.json b/types/react/package.json index 3046ec722efa46..f883304e4a90ab 100644 --- a/types/react/package.json +++ b/types/react/package.json @@ -62,7 +62,6 @@ }, "devDependencies": { "@types/react": "workspace:.", - "@types/react-dom": "*", "@types/react-dom-factories": "*", "@types/trusted-types": "*" }, diff --git a/types/react/test/index.ts b/types/react/test/index.ts index e8e09c80821f13..58df18d422768b 100644 --- a/types/react/test/index.ts +++ b/types/react/test/index.ts @@ -1,8 +1,6 @@ import * as PropTypes from "prop-types"; import * as React from "react"; -import * as ReactDOM from "react-dom"; import * as DOM from "react-dom-factories"; -import * as ReactDOMServer from "react-dom/server"; import "trusted-types"; // NOTE: forward declarations for tests @@ -322,23 +320,9 @@ const clonedSvgElement: React.ReactSVGElement = React.cloneElement(svgElement, { className: "clonedVGElement", }); -// React.render -const component: ModernComponent = ReactDOM.render(element, container); -const componentNullContainer: ModernComponent = ReactDOM.render(element, null); - -const componentElementOrNull: ModernComponent = ReactDOM.render(element, container); -const componentNoState: ModernComponentNoState = ReactDOM.render(elementNoState, container); -const componentNoStateElementOrNull: ModernComponentNoState = ReactDOM.render(elementNoState, container); -const domComponent: Element = ReactDOM.render(domElement, container); - // Other Top-Level API -const unmounted: boolean = ReactDOM.unmountComponentAtNode(container); -const str: string = ReactDOMServer.renderToString(element); -const markup: string = ReactDOMServer.renderToStaticMarkup(element); const notValid: boolean = React.isValidElement(props); // false const isValid = React.isValidElement(element); // true -let domNode = ReactDOM.findDOMNode(component); -domNode = ReactDOM.findDOMNode(domNode as Element); const fragmentType: React.ComponentType = React.Fragment; // React.Profiler @@ -365,6 +349,8 @@ const key = element.key; // Component API // -------------------------------------------------------------------------- +declare const component: InstanceType; + // modern const componentState: State = component.state; component.setState({ inputValue: "!!!" }); diff --git a/types/react/ts5.0/test/index.ts b/types/react/ts5.0/test/index.ts index 1c4502b6a33e2b..f5d343822a1376 100644 --- a/types/react/ts5.0/test/index.ts +++ b/types/react/ts5.0/test/index.ts @@ -1,8 +1,6 @@ import * as PropTypes from "prop-types"; import * as React from "react"; -import * as ReactDOM from "react-dom"; import * as DOM from "react-dom-factories"; -import * as ReactDOMServer from "react-dom/server"; import "trusted-types"; // NOTE: forward declarations for tests @@ -325,23 +323,9 @@ const clonedSvgElement: React.ReactSVGElement = React.cloneElement(svgElement, { className: "clonedVGElement", }); -// React.render -const component: ModernComponent = ReactDOM.render(element, container); -const componentNullContainer: ModernComponent = ReactDOM.render(element, null); - -const componentElementOrNull: ModernComponent = ReactDOM.render(element, container); -const componentNoState: ModernComponentNoState = ReactDOM.render(elementNoState, container); -const componentNoStateElementOrNull: ModernComponentNoState = ReactDOM.render(elementNoState, container); -const domComponent: Element = ReactDOM.render(domElement, container); - // Other Top-Level API -const unmounted: boolean = ReactDOM.unmountComponentAtNode(container); -const str: string = ReactDOMServer.renderToString(element); -const markup: string = ReactDOMServer.renderToStaticMarkup(element); const notValid: boolean = React.isValidElement(props); // false const isValid = React.isValidElement(element); // true -let domNode = ReactDOM.findDOMNode(component); -domNode = ReactDOM.findDOMNode(domNode as Element); const fragmentType: React.ComponentType = React.Fragment; // React.Profiler @@ -368,6 +352,8 @@ const key = element.key; // Component API // -------------------------------------------------------------------------- +declare const component: InstanceType; + // modern const componentState: State = component.state; component.setState({ inputValue: "!!!" });