Writing unit tests for your SharePoint Framework components

1
/// <reference types="mocha" />
2
/// <reference types="sinon" />
3

4
import * as React from 'react';
5
import { assert, expect } from 'chai';
6
import { mount, configure } from 'enzyme';
7
import HelloWorld from '../components/HelloWorld';
8

9
configure({ adapter: new Adapter() });
10

11
declare const sinon;
12

13
describe('<HelloWorld />', () => {
14
    const descTxt = "TestingThisOneOut";
15
    let componentDidMountSpy;
16
    let renderedElement;
17

18
    before(() => {
19
        componentDidMountSpy = sinon.spy(HelloWorld.prototype, 'componentDidMount');
20
        renderedElement = mount(<HelloWorld description={descTxt} />);
21
    });
22

23
    after(() => {
24
        componentDidMountSpy.restore();
25
    });
26

27
    // Write your tests here
28
});

1
it('<HelloWorld /> should render something', () => {
2
    // Check if the component contains a paragraph element
3
    expect(renderedElement.find('p')).to.be.exist;
4
});
5

6
it('<HelloWorld /> should render the description', () => {
7
    // Check if the component renders the description you provided
8
    expect(renderedElement.find('p.description').text()).to.be.equals(descTxt);
9
});
10

11
it('<HelloWorld /> should render an ul', () => {
12
    // Check if the component contains an UL element
13
    expect(renderedElement.find('ul')).to.be.exist;
14
});
15

16
it('<HelloWorld /> state results should be null', () => {
17
    // State should be null when the component gets loaded
18
    expect(renderedElement.state('results')).to.be.null;
19
});
20

21
it('<HelloWorld /> should call componentDidMount only once', () => {
22
    // Check if the componentDidMount is called once
23
    expect(componentDidMountSpy.calledOnce).to.equal(true);
24
});
25

26
it('<HelloWorld /> should render an ul with 3 items (using the mock data)', (done) => {
27
    // New instance should be created for this test due to setTimeout
28
    // If the global renderedElement used, the result of "ul li"" will be 10 instead of 3
29
    // because the state changes to 10 in the last test and
30
    // the last test is executed before this one bacause of setTimeout
31
    let renderedElement1 = mount(<HelloWorld description={descTxt} />);
32
    // Wait for 1 second to check if your mock results are retrieved
33
    setTimeout(() => {
34
        // Trigger state update
35
        renderedElement1.update();
36
        expect(renderedElement1.state('results')).to.not.be.null;
37
        expect(renderedElement1.find('ul li').length).to.be.equal(3);
38
        done(); // done is required by mocha, otherwise the test will yield SUCCESS no matter of the expect cases
39
    }, 1000);
40
});
41

42
it('<HelloWorld /> should render 10 list items (triggering setState from the test)', () => {
43
    // Change the state of the component
44
    renderedElement.setState({
45
        results: {
46
            value: [
47
                { Title: "Mock List 1", Id: '1' },
48
                { Title: 'Mock List 2', Id: '2' },
49
                { Title: 'Mock List 3', Id: '3' },
50
                { Title: 'Mock List 4', Id: '4' },
51
                { Title: 'Mock List 5', Id: '5' },
52
                { Title: 'Mock List 6', Id: '6' },
53
                { Title: 'Mock List 7', Id: '7' },
54
                { Title: 'Mock List 8', Id: '8' },
55
                { Title: 'Mock List 9', Id: '9' },
56
                { Title: 'Mock List 10', Id: '10' }
57
            ]
58
        }
59
    });
60

61
    expect(renderedElement.update().state('results')).to.not.be.null;
62
    expect(renderedElement.update().find('ul li').length).to.be.equal(10);
63
});