async-component.spec.js

import AsyncComponent from './path/to/component';
import request from 'your-request-library';

import React from 'react';
import {shallow} from 'enzyme';

import Chance from 'chance';
import chai, {expect} from 'chai';
import sinon from 'sinon';
import sinonChai from 'sinon-chai';

describe('Async Component', () => {
    let renderedElement,
        renderedInstance,
        expectedApiResponse,
        sandbox,
        chance;

    function renderComponent() {
        const componentElement = React.createElement(AsyncComponent);

        renderedElement = shallow(componentElement);
        renderedInstance = renderedElement.instance();
    }

    before(() => {
        chai.use(sinonChai);
    });

    beforeEach(() => {
        chance = new Chance();
        sandbox = sinon.sandbox.create();

        renderComponent();

        expectedApiResponse = chance.string();

        sandbox.stub(request, 'get').resolves(expectedApiResponse);
        sandbox.stub(renderedInstance, 'setState');
    });

    afterEach(() => {
        sandbox.restore();
    });

    describe('Given the component was mounted to the DOM', () => {
        beforeEach(async () => {
            await renderedInstance.componentDidMount();
        });

        it('should send a request to the server', () => {
            expect(request.get).to.have.callCount(1);
            expect(request.get).to.be.calledWith('/some/url/that/returns/my/data');
        });

        it('should set the component state with the result', () => {
            expect(renderedInstance.setState).to.have.callCount(1);
            expect(renderedInstance.setState).to.be.calledWith({
                records: expectedApiResponse
            });
        });
    });
});