Async React, Jest + Enzyme tests example

AsyncComponent.test.js

/**
 * @jest-environment jsdom
 */
import React, { Component } from "react";
import { mount } from "enzyme";

const Updated = () => <div>Updated!</div>;

class TimeoutComponent extends Component {
    state = {
        updated: false
    };
    componentDidMount() {
        setTimeout(
            () =>
                this.setState({ updated: true }, () =>
                    console.log("State Updated!")
                ),
            1
        );
    }
    render() {
        return <div>{this.state.updated && <Updated />}</div>;
    }
}

class ImmediateComponent extends Component {
    state = {
        updated: false
    };
    componentDidMount() {
        setImmediate(() =>
            this.setState({ updated: true }, () =>
                console.log("State Updated!")
            )
        );
    }
    render() {
        return <div>{this.state.updated && <Updated />}</div>;
    }
}

class NextTickComponent extends Component {
    state = {
        updated: false
    };
    componentDidMount() {
        process.nextTick(() =>
            this.setState({ updated: true }, () =>
                console.log("State Updated!")
            )
        );
    }
    render() {
        return <div>{this.state.updated && <Updated />}</div>;
    }
}

class PromiseComponent extends Component {
    state = {
        updated: false
    };
    componentDidMount() {
        Promise.resolve().then(() =>
            this.setState({ updated: true }, () =>
                console.log("State Updated!")
            )
        );
    }
    render() {
        return <div>{this.state.updated && <Updated />}</div>;
    }
}

describe("Async mounting", () => {
    [
        TimeoutComponent,
        ImmediateComponent,
        NextTickComponent,
        PromiseComponent
    ].forEach(AsyncComponent => {
        it(`${AsyncComponent.name} Should render the updated component`, async () => {
            jest.useFakeTimers();
            const wrapper = await mount(<AsyncComponent />);
            jest.runAllTimers();
            console.log(wrapper.html());
            expect(wrapper.html()).toBe("<div><div>Updated!</div></div>");
        });
    });
});