A Simple Test Suite

describe('todoService', () => {

  before(() => {
    // Setup code that runs before the test suite is executed
  })

  describe('getTodos()', () => {

    before(() => {
      // Setup code that runs before the getTodos() tests are executed
    })

    it('retrieves all todos from the API', () => {
      const result = getTodos()
      expect(result).to.deep.equal({id: 1, title: 'Write tests'})
    })
    
  })
  
})

Results

Reporters

Lifecycle Hooks

before(() => {
  // Setup code that runs before the tests within the current describe block
})

beforeEach(() => {
  // Setup code that runs before each test
})

after(() => {
  // Teardown code that runs after the tests within the current describe block
})

afterEach(() => {
  // Teardown code that runs after each test
})

Asynchronous Testing

it('retrieves all todos from the API', done => {
  getTodos(result => {
    expect(result).to.deep.equal({id: 1, title: 'Write tests'})
    done()
  })
})

it('retrieves all todos from the API', () => {
  const promise = getTodos()

  return promise.then(result => {
    expect(result).to.deep.equal({id: 1, title: 'Write tests'})
  })
})

it('retrieves all todos from the API', () => {
  const promise = getTodos()
  return expect(result).to.eventually.deep.equal({id: 1, title: 'Write tests'})
})

Mocking

import chai from 'chai'
import sinon from 'sinon'
import sinonChai from 'sinon-chai'                                          ;

chai.use('sinon-chai')

describe('myModule', () => {

  describe('myFunction()', () => {

    it('calls the given callback with an array', () => {
      const callback = sinon.spy()

      myFunction(callback)
      
      expect(callback).to.have.been.calledOnce

      const call = callback.firstCall
      expect(call.args[0]).to.be.an.instanceof(Array)
    })
    
  })
  
})

Use it to:

• Isolate distinct functionality
• Remove dependencies on external code
• Provide predictable responses for internal or external interaction

Ajax Interception

import nock from 'nock'                                                                                      ;

const platform = nock('http://localhost:8080')                                                   ;

describe('getPostTitles()', () => {

  it('requests posts from the platform and returns just the titles', () => {
    platform.get('/posts').reply(200, {id: 1, title: 'My Post', author: 'Me'})

    const results = getPostTitles()

    expect(results).to.equal(['My Post'])
  })
  
})

Dependency Injection

import {isResponsive} from '../path/to/codingTools'              ;

export function myFunction() {
  // Code all the things!
}

const isResponsiveStub = sinon.stub().returns(true)

const {myFunction} = proxyquire('../src/myModule', {
  '../path/to/codingTools': {isResponsive: isResponsiveStub}
})

// Test all the things!

myModule.js →

testMyModule.js →

What if you need isResponsive() to return true every time it's called?

What about JSX?

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

describe('<MyComponent />', () => {

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    )
    expect(wrapper.contains(<div className="unique" />)).to.equal(true)
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy()
    const wrapper = shallow(
      <Foo onButtonClick={onButtonClick} />
    )
    wrapper.find('button').simulate('click')
    expect(onButtonClick.calledOnce).to.equal(true)
  })

})

It's been a long journey, but effective JSX unit testing is finally here thanks to airbnb's Enzyme library.

A rapid feedback loop is ideal.