React Test Utilities Examples - Early Tests I Wrote for WeDoTDD.com in 2015

company-detail-header-spec.js

// source: https://github.com/dschinkel/we-do-tdd/commit/9e58e254b2c4fc70ebf54ff475079facd2c61d71

import {Component,Store} from 'reactivate';
import CompanyHeader from '../../client/components/companyDetail/CompanyHeader';
import {expect} from 'chai';
import {reactUtil} from '../helper';
const store = Store();
const {renderIntoDocument, find} = reactUtil;

 describe('Company Detail - Header', () => {
     let component;
     
     it('shows a company header', () => {
        store.push([]);
         component = renderIntoDocument(<CompanyHeader store={store}/>);
        const expected = find(component, '.ft-companyDetail-header');
         
       expect(expected.length).to.equal(1);
    });
})

company-detail-spec.js

// source: https://github.com/dschinkel/we-do-tdd/blob/6a3ece31af1fc7bd4a42458004da2a5ba1264b83/src/test/specs/company-detail-spec.js

import {reactUtil} from '../helper';
import {Component,Store} from 'reactivate';
import App from '../../client/components/App';
import {expect} from 'chai';
var companies = require('../../shared/data/companies.json');
const store = Store('/companies');

const {renderIntoDocument, find} = reactUtil;

describe('CompanyDetail', () => {

    it('shows the Company Detail Page', done => {
        store.push([{id: 1, name: 'Pillar'}]);

        var component = renderIntoDocument(<App store={store}/>),
                        expected = find(component, '.ft-company');

        expect(expected.length).to.equal(1);
        done();
    });
});

company-list-spec.js

// source: https://github.com/dschinkel/we-do-tdd/blob/6a3ece31af1fc7bd4a42458004da2a5ba1264b83/src/test/specs/company-list-spec.js

import {Component,Store} from 'reactivate';
import CompanyList from '../../client/components/CompanyList';
import {expect} from 'chai';
import {reactUtil} from '../helper';
const store = Store(),
{renderIntoDocument, find} = reactUtil;

describe('CompanyList', () => {

    it('handles no companies', () => {
        store.push([]);

        const component = renderIntoDocument(<CompanyList store={store}/>),
          expected = find(component, '.ft-company');

        expect(expected.length).to.equal(0);
    });

    it('handles companies', () => {
        store.push([{id: 1, name: 'Pillar'}]);

        const component = renderIntoDocument(<CompanyList store={store}/>),
          expected = find(component, '.ft-company');

        expect(expected.length).to.equal(1);
    });
});

job-list-spec.js

import {Store} from 'reactivate';
import JobList from '../client/components/list/JobList';
import {expect} from 'chai';
import {render, find} from '../utils.js'

const store = Store();

describe('Job List', () => {
  
    it('handles no jobs', () => {
        store.push([]);
        const component = render(<JobList store={store} noRecordsMessage="no records found"/>),
            jobsList = find(component, '.ft-jobs-list'),
            message = jobsList[0].querySelector('ul li span').textContent;

        expect(message).to.equal("no records found");
    });

    it('shows a page header', () => {
        store.push([]);
        const component = render(<JobList store={store}/>),
            jobsList = find(component, '.section-heading'),
            headerText = jobsList[0].querySelector('p').textContent;

        expect(headerText).to.equal("TDD Jobs");
    });

    it('has a job id', () => {
        store.push([{ id: 1 }])

        const component = render(<JobList store={store}/>),
        jobsList = find(component, '.ft-jobs-list'),
            id = parseInt(jobsList[0].querySelector('ul li a').id);

        expect(id).to.equal(1);
    });

    it('shows text for job title', () => {
        store.push([{
            title: 'Sr. Software Engineer'
        }]);

        const component = render(<JobList store={store}/>),
            jobsList = find(component, '.ft-jobs-list'),
            title = jobsList[0].querySelector('ul li:first-child a').textContent;

        expect(title).to.equal('Sr. Software Engineer');
    });

    it('shows a company logo', () => {
        var src = "/lib/assets/Pillar/pillar-logo.png";

        store.push([{
            company: {
                logo: src
            }
        }])

        const component = render(<JobList store={store}/>),
                jobsList = find(component, '.ft-jobs-list'),
              imgSrc = jobsList[0].querySelector('ul li:first-child img').src,
              relativeSrc = imgSrc.slice(imgSrc.indexOf('/lib'), imgSrc.length);

        expect(relativeSrc).to.equal(src);
    });

    it('shows text for company name', () => {
        store.push([{
            company: {
                name: "WeDoTDD.com"
            }
        }]);

        const component = render(<JobList store={store}/>),
            jobsList = find(component, '.ft-jobs-list'),
            companyName = jobsList[0].querySelector('ul li span').textContent;

        expect(companyName).to.equal('WeDoTDD.com');
    });
});