DefinitelyTyped/types/react-dom/react-dom-tests.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactDOMServer from 'react-dom/server';
import * as ReactDOMNodeStream from 'react-dom/node-stream';
import * as ReactTestUtils from 'react-dom/test-utils';

declare function describe(desc: string, f: () => void): void;
declare function it(desc: string, f: () => void): void;

class TestComponent extends React.Component<{x: string}> { }

describe('ReactDOM', () => {
    it('render', () => {
        const rootElement = document.createElement('div');
        ReactDOM.render(React.createElement('div'), rootElement);
    });

    it('hydrate', () => {
        const rootElement = document.createElement('div');
        ReactDOM.hydrate(React.createElement('div'), rootElement);
    });

    it('unmounts', () => {
        const rootElement = document.createElement('div');
        ReactDOM.render(React.createElement('div'), rootElement);
        ReactDOM.unmountComponentAtNode(rootElement);
    });

    it('find dom node', () => {
        const rootElement = document.createElement('div');
        ReactDOM.render(React.createElement('div'), rootElement);
        ReactDOM.findDOMNode(rootElement);
        ReactDOM.findDOMNode(null);
        ReactDOM.findDOMNode(undefined);
    });

    it('createPortal', () => {
        const rootElement = document.createElement('div');
        const portalTarget = document.createElement('div');

        class ClassComponent extends React.Component {
            render() {
                return ReactDOM.createPortal(<div />, portalTarget);
            }
        }

        ReactDOM.createPortal(<div />, document.createElement('div'));
        ReactDOM.createPortal(<div />, document.createElement('div'), null);
        ReactDOM.createPortal(<div />, document.createElement('div'), 'key');

        ReactDOM.createPortal(React.createElement('div'), document.createElement('div'));
        ReactDOM.createPortal(React.createElement('div'), document.createElement('div'), null);
        ReactDOM.createPortal(React.createElement('div'), document.createElement('div'), 'key');

        ReactDOM.render(<ClassComponent />, rootElement);
    });

    it('unstable_createRoot', () => {
      const container = document.body;
      const root = ReactDOM.unstable_createRoot(container);
      root
        .render(<div>initial render</div>, () => {
          console.log('callback');
        })
        .then(() => {
          console.log('onCommit');
          const batch = root.createBatch();

          batch.render(<div>Batch 1</div>).then(() => {
            console.log('committed first batch');
          });
          batch.render(<div>Batch 2</div>).then(() => {
            console.log('committed second batch');
          });

          batch.then(() => {
            console.log('batch completed');
            batch.commit();
          });
        });
    });

    it('unstable_createSyncRoot', () => {
      const container = document.body;
      const root = ReactDOM.unstable_createSyncRoot(container, {
        hydrate: true,
      });
      root
        .render(<div>initial render</div>, () => {
          console.log('callback');
        })
        .then(() => {
          console.log('onCommit');
          // $ExpectError
          const batch = root.createBatch();

          root.unmount(() => console.log('unmounted'));
        });
    });
});

describe('ReactDOMServer', () => {
    it('renderToString', () => {
        const content: string = ReactDOMServer.renderToString(React.createElement('div'));
    });

    it('renderToStaticMarkup', () => {
        const content: string = ReactDOMServer.renderToStaticMarkup(React.createElement('div'));
    });
});

describe('ReactDOMNodeStream', () => {
    it('renderToStream', () => {
        const content: any = ReactDOMNodeStream.renderToStream(React.createElement('div'));
    });

    it('renderToStaticStream', () => {
        const content: any = ReactDOMNodeStream.renderToStaticStream(React.createElement('div'));
    });
});

describe('React dom test utils', () => {
    it('Simulate', () => {
        const element = document.createElement('div');
        const dom = ReactDOM.render(
            React.createElement('input', { type: 'text' }),
            element
        ) as Element;
        const node = ReactDOM.findDOMNode(dom) as HTMLInputElement;

        node.value = 'giraffe';
        ReactTestUtils.Simulate.change(node);
        ReactTestUtils.Simulate.keyDown(node, { key: "Enter", keyCode: 13, which: 13 });
    });

    it('renderIntoDocument', () => {
        const element = React.createElement('input', { type: 'text' });
        ReactTestUtils.renderIntoDocument(element);
    });

    it('mockComponent', () => {
        ReactTestUtils.mockComponent(TestComponent, 'div');
    });

    it('isElement', () => {
        const element = React.createElement(TestComponent);
        const isReactElement: boolean = ReactTestUtils.isElement(element);
    });

    it('isElementOfType', () => {
        const element = React.createElement(TestComponent);
        const isReactElement: boolean = ReactTestUtils.isElementOfType(element, TestComponent);
    });

    it('isDOMComponent', () => {
        const element = React.createElement('div');
        const instance = ReactTestUtils.renderIntoDocument(element) as HTMLDivElement;
        const isDOMElement: boolean = ReactTestUtils.isDOMComponent(instance);
    });

    it('isCompositeComponent', () => {
        const element = React.createElement(TestComponent);
        const instance: TestComponent = ReactTestUtils.renderIntoDocument(element);
        const isCompositeComponent: boolean = ReactTestUtils.isCompositeComponent(instance);
    });

    it('isCompositeComponentWithType', () => {
        const element = React.createElement(TestComponent);
        const instance: TestComponent = ReactTestUtils.renderIntoDocument(element);
        const isCompositeComponent: boolean = ReactTestUtils.isCompositeComponentWithType(instance, TestComponent);
    });

    it('findAllInRenderedTree', () => {
        const component = ReactTestUtils.renderIntoDocument(React.createElement(TestComponent));
        ReactTestUtils.findAllInRenderedTree(component, (i: React.ReactInstance) => true);
    });

    it('scryRenderedDOMComponentsWithClass', () => {
        const component = ReactTestUtils.renderIntoDocument(React.createElement(TestComponent));
        ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'class');
    });

    it('findRenderedDOMComponentWithClass', () => {
        const component = ReactTestUtils.renderIntoDocument(React.createElement(TestComponent));
        ReactTestUtils.findRenderedDOMComponentWithClass(component, 'class');
    });

    it('scryRenderedDOMComponentsWithTag', () => {
        const component = ReactTestUtils.renderIntoDocument(React.createElement(TestComponent));
        ReactTestUtils.scryRenderedDOMComponentsWithTag(component, 'div');
    });

    it('findRenderedDOMComponentWithTag', () => {
        const component = ReactTestUtils.renderIntoDocument(React.createElement(TestComponent));
        ReactTestUtils.findRenderedDOMComponentWithTag(component, 'tag');
    });

    it('scryRenderedComponentsWithType', () => {
        const component = ReactTestUtils.renderIntoDocument(React.createElement(TestComponent));
        ReactTestUtils.scryRenderedComponentsWithType(component, TestComponent);
    });

    it('findRenderedComponentWithType', () => {
        const component = ReactTestUtils.renderIntoDocument(React.createElement(TestComponent));
        ReactTestUtils.findRenderedComponentWithType(component, TestComponent);
    });

    describe('Shallow Rendering', () => {
        it('createRenderer', () => {
            const component = React.createElement(TestComponent);
            const shallowRenderer = ReactTestUtils.createRenderer();
        });

        it('shallowRenderer.render', () => {
            const component = React.createElement(TestComponent);
            const shallowRenderer = ReactTestUtils.createRenderer();
            shallowRenderer.render(component);
        });

        it('shallowRenderer.getRenderOutput', () => {
            const component = React.createElement(TestComponent);
            const shallowRenderer = ReactTestUtils.createRenderer();
            shallowRenderer.getRenderOutput();
        });
    });

    describe('act', () => {
        it('accepts a sync callback that is void', () => {
            ReactTestUtils.act(() => {});
        });
        it('accepts an async callback that is void', async () => {
            await ReactTestUtils.act(async () => {});
        });
        it('rejects a callback that returns null', () => {
            // $ExpectError
            ReactTestUtils.act(() => null);
        });
        it('returns a Promise-like that errors out on use', () => {
            const result = ReactTestUtils.act(() => {});
            // $ExpectError
            Promise.resolve(result);
        });
    });
});