Compilation of snippets for a testing React components.

ComponentTest.tsx

import * as React from 'react';
import * as sinon from 'Sinon';
import { expect, assert } from 'chai';
import { mount, render, shallow } from 'enzyme';

import { ModalComponent } from './path/of/my/modal/component';
import * as Button from 'react-bootstrap/lib/Button';
import * as ModalFooter from 'react-bootstrap/lib/ModalFooter';
import * as ModalBody from 'react-bootstrap/lib/ModalBody';
import * as Modal from 'react-bootstrap/lib/Modal';


describe('<MyModalComponent />', () => 
{
    var server;
    var sandbox: sinon.SinonSandbox;
    var dispatch;
    var spyDispatch;

    beforeEach(() =>
    {
        server = sinon.fakeServer.create();
        sandbox = sinon.sandbox.create();
        dispatch = { Dispatch: payload => { } };
        spyDispatch = sandbox.spy(dispatch, "Dispatch");
    });

    afterEach(function ()
    {
        sandbox.restore();
        spyDispatch.restore();
    });

    var getModalProps = (): IModalProps => 
    {
        return { 
            Title: '',
            ShowDialog: true,
            DocumentList: [],
            OnClose: (aborted:boolean) => {},
        }
    }


    // Sample to check Id. Check the documentations on Enzyme.
    it("Modal execute cancel onclick callback succesfully", () =>
    {
        var callback = sandbox.spy();
        var props = Object.assign({}, getModalProps(), { OnClose: callback })
        const wrapper = shallow(<ModalComponent {...props } />);
        expect(wrapper.find({ id: '#MySampleID' }));
    });

    // Sample to dive through sub components and find by id, simulate the click, and check the callback.
    it("Modal execute cancel onclick callback succesfully", () =>
    {
        var callback = sandbox.spy();
        var props = Object.assign({}, getModalProps(), { OnClose: callback })
        const wrapper = shallow(<ModalComponent {...props } />);
        wrapper.find(Modal).dive().find(ModalFooter).dive().find(Button).at(1).dive().find("#DocModalAdd").simulate("click");
        expect(callback.calledWith(false)).equals(true, "Confirm click returning true on aborted");
    });

    // Sample to test the component state value using wrapper.instance() and use sandbox stub to test actions.
    it('Should <RelatedDocumentsModal /> properly handle adding related documents.', () => 
    {
        // Pre
        var props = Object.assign({}, getProps(), { ShowRelatedDocuments: true, RelatedDocuments: [] });
        var wrapper:any = mount(<DocumentModal {...props} />);
        var expectedDocumentAction = sandbox.stub(DocumentListActions, 'Dispatch');
        var expectSectionAction = sandbox.stub(SectionDocumentActions, 'Dispatch');

        // Execute
        wrapper.instance().onRelatedDocumentsClose(false); // call the component public function.

        // Test
        expect(expectedDocumentAction.calledOnce).equals(true);
        expect(expectedDocumentAction.firstCall.args[0].type).equals('SetFilterStatus', 'Action type not equal to SetFilterStatus.');
        expect(expectedDocumentAction.firstCall.args[0].Value.length).equals(0, 'Action value is not empty.');
        expect(expectSectionAction.calledOnce).equals(true);
        expect(expectSectionAction.firstCall.args[0].type).equals('SetRelatedDocumentsFromList', 'Action type not equal to SetRelatedDocumentsFromList.');
        expect(expectSectionAction.firstCall.args[0].Documents.length).equals(0, 'Action documents not equal to zero.');
    })
});