react-test-renderer: update to v16 API (#20396)

* react-test-renderer: copy existing to v15

* react-test-renderer: update to v16 API

* react-test-renderer/shallow: update to v16 API

* react-test-renderer: fix lint, path mappings

types/react-test-renderer/index.d.ts

@@ -1,25 +1,52 @@
-// Type definitions for react-test-renderer 15.5
+// Type definitions for react-test-renderer 16.0
 // Project: https://facebook.github.io/react/
-// Definitions by: Arvitaly <https://github.com/arvitaly>, Lochbrunner <https://github.com/lochbrunner>, Lochbrunner <https://github.com/lochbrunner>, John Reilly <https://github.com/johnnyreilly>
+// Definitions by: Arvitaly <https://github.com/arvitaly>
+//                 Lochbrunner <https://github.com/lochbrunner>
+//                 John Reilly <https://github.com/johnnyreilly>
+//                 John Gozde <https://github.com/jgoz>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
-import { ReactElement } from "react";
+import { ReactElement, ReactType } from "react";
+
+// extracted from:
+// - https://github.com/facebook/react/blob/v16.0.0/src/renderers/testing/ReactTestRendererFiberEntry.js
+// - https://reactjs.org/docs/test-renderer.html
 
-export interface ReactTestInstance {
-    toJSON(): ReactTestRendererJSON;
-    unmount(nextElement?: ReactElement<any>): void;
-    update(nextElement: ReactElement<any>): void;
-    getInstance(): any;
-}
 export interface ReactTestRendererJSON {
     type: string;
     props: { [propName: string]: any };
-    children: null | Array<string | ReactTestRendererJSON>;
-    $$typeof?: any;
+    children: null | ReactTestRendererJSON[];
+}
+export interface ReactTestRendererTree extends ReactTestRendererJSON {
+    nodeType: "component" | "host";
+    instance: any;
+    rendered: null | ReactTestRendererTree;
+}
+export interface ReactTestInstance {
+    instance: any;
+    type: string;
+    props: { [propName: string]: any };
+    parent: null | ReactTestInstance;
+    children: Array<ReactTestInstance | string>;
+
+    find(predicate: (node: ReactTestInstance) => boolean): ReactTestInstance;
+    findByType(type: ReactType): ReactTestInstance;
+    findByProps(props: { [propName: string]: any }): ReactTestInstance;
+
+    findAll(predicate: (node: ReactTestInstance) => boolean, options?: { deep: boolean }): ReactTestInstance[];
+    findAllByType(type: ReactType, options?: { deep: boolean }): ReactTestInstance[];
+    findAllByProps(props: { [propName: string]: any }, options?: { deep: boolean }): ReactTestInstance[];
+}
+export interface ReactTestRenderer {
+    toJSON(): null | ReactTestRendererJSON;
+    toTree(): null | ReactTestRendererTree;
+    unmount(nextElement?: ReactElement<any>): void;
+    update(nextElement: ReactElement<any>): void;
+    getInstance(): null | ReactTestInstance;
+    root: ReactTestInstance;
 }
 export interface TestRendererOptions {
     createNodeMock(element: ReactElement<any>): any;
 }
-// https://github.com/facebook/react/blob/master/src/renderers/testing/ReactTestMount.js#L155
-export function create(nextElement: ReactElement<any>, options?: TestRendererOptions): ReactTestInstance;
+export function create(nextElement: ReactElement<any>, options?: TestRendererOptions): ReactTestRenderer;

types/react-test-renderer/react-test-renderer-tests.ts

@@ -1,23 +1,68 @@
 import * as React from "react";
-import { create } from "react-test-renderer";
+import { create, ReactTestInstance } from "react-test-renderer";
 import { createRenderer } from 'react-test-renderer/shallow';
 
-const tree = create(React.createElement("div"), {
+class TestComponent extends React.Component { }
+
+const renderer = create(React.createElement("div"), {
     createNodeMock: (el: React.ReactElement<any>) => {
         return {};
     }
-}).toJSON();
+});
 
-tree.type = "t";
-tree.props = {
-    prop1: "p",
-};
-tree.children = [tree];
-tree.$$typeof = "t";
+const json = renderer.toJSON();
+if (json) {
+    json.type = "t";
+    json.props = {
+        prop1: "p",
+    };
+    json.children = [json];
+}
 
-class TestComponent extends React.Component { }
+const tree = renderer.toTree();
+if (tree) {
+    tree.type = "t";
+    tree.props = {
+        prop1: "p",
+    };
+    tree.children = [tree];
+    tree.rendered = tree;
+    tree.nodeType = "component";
+    tree.nodeType = "host";
+}
+
+renderer.update(React.createElement(TestComponent));
+
+renderer.unmount();
+renderer.unmount(React.createElement(TestComponent));
+
+function testInstance(inst: ReactTestInstance) {
+    inst.children = [inst, "a"];
+    inst.parent = instance;
+    inst.parent = null;
+    inst.props = {
+        prop1: "p",
+    };
+    inst.type = "t";
+    testInstance(inst.find(n => n.type === "t"));
+    testInstance(inst.findByProps({ prop1: "p" }));
+    testInstance(inst.findByType("t"));
+    testInstance(inst.findByType(TestComponent));
+    inst.findAll(n => n.type === "t", { deep: true }).map(testInstance);
+    inst.findAllByProps({ prop1: "p" }, { deep: true }).map(testInstance);
+    inst.findAllByType("t", { deep: true }).map(testInstance);
+    inst.findAllByType(TestComponent, { deep: true }).map(testInstance);
+}
+
+const instance = renderer.getInstance();
+if (instance) {
+    testInstance(instance);
+}
+
+testInstance(renderer.root);
 
 const component = React.createElement(TestComponent);
 const shallowRenderer = createRenderer();
 shallowRenderer.render(component);
 shallowRenderer.getRenderOutput();
+shallowRenderer.getMountedInstance();

types/react-test-renderer/shallow/index.d.ts

@@ -1,6 +1,10 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactInstance } from 'react';
 
 export interface ShallowRenderer {
+    /**
+     * After `shallowRenderer.render()` has been called, returns mounted instance.
+     */
+    getMountedInstance(): ReactInstance;
     /**
      * After `shallowRenderer.render()` has been called, returns shallowly rendered output.
      */

types/react-test-renderer/tslint.json

@@ -1,6 +1,7 @@
 {
     "extends": "dtslint/dt.json",
     "rules": {
+        "dt-header": false,
         "no-unnecessary-generics": false
     }
 }

types/react-test-renderer/v15/index.d.ts

@@ -0,0 +1,25 @@
+// Type definitions for react-test-renderer 15.5
+// Project: https://facebook.github.io/react/
+// Definitions by: Arvitaly <https://github.com/arvitaly>, Lochbrunner <https://github.com/lochbrunner>, Lochbrunner <https://github.com/lochbrunner>, John Reilly <https://github.com/johnnyreilly>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import { ReactElement } from "react";
+
+export interface ReactTestInstance {
+    toJSON(): ReactTestRendererJSON;
+    unmount(nextElement?: ReactElement<any>): void;
+    update(nextElement: ReactElement<any>): void;
+    getInstance(): any;
+}
+export interface ReactTestRendererJSON {
+    type: string;
+    props: { [propName: string]: any };
+    children: null | Array<string | ReactTestRendererJSON>;
+    $$typeof?: any;
+}
+export interface TestRendererOptions {
+    createNodeMock(element: ReactElement<any>): any;
+}
+// https://github.com/facebook/react/blob/master/src/renderers/testing/ReactTestMount.js#L155
+export function create(nextElement: ReactElement<any>, options?: TestRendererOptions): ReactTestInstance;

types/react-test-renderer/v15/react-test-renderer-tests.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { create } from "react-test-renderer";
+import { createRenderer } from 'react-test-renderer/shallow';
+
+const tree = create(React.createElement("div"), {
+    createNodeMock: (el: React.ReactElement<any>) => {
+        return {};
+    }
+}).toJSON();
+
+tree.type = "t";
+tree.props = {
+    prop1: "p",
+};
+tree.children = [tree];
+tree.$$typeof = "t";
+
+class TestComponent extends React.Component { }
+
+const component = React.createElement(TestComponent);
+const shallowRenderer = createRenderer();
+shallowRenderer.render(component);
+shallowRenderer.getRenderOutput();

types/react-test-renderer/v15/shallow/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+
+export interface ShallowRenderer {
+    /**
+     * After `shallowRenderer.render()` has been called, returns shallowly rendered output.
+     */
+    getRenderOutput<E extends ReactElement<any>>(): E;
+    /**
+     * After `shallowRenderer.render()` has been called, returns shallowly rendered output.
+     */
+    getRenderOutput(): ReactElement<any>;
+    /**
+     * Similar to `ReactDOM.render` but it doesn't require DOM and only renders a single level deep.
+     */
+    render(element: ReactElement<any>, context?: any): void;
+    unmount(): void;
+}
+
+/**
+ * Call this in your tests to create a shallow renderer.
+ */
+export function createRenderer(): ShallowRenderer;

types/react-test-renderer/v15/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "paths": {
+            "react": [
+                "react/v15"
+            ],
+            "react-test-renderer": [
+                "react-test-renderer/v15"
+            ]
+        },
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "shallow/index.d.ts",
+        "react-test-renderer-tests.ts"
+    ]
+}

types/react-test-renderer/v15/tslint.json

@@ -0,0 +1,7 @@
+{
+    "extends": "dtslint/dt.json",
+    "rules": {
+        "dt-header": false,
+        "no-unnecessary-generics": false
+    }
+}