GreatHorn JS Testing Cheat Sheet - using Mocha, Chai, Enzyme, and Sinon

This cheatsheet was created to describe the JS frontend testing setup we use at GreatHorn. It may skip or gloss over some components these frameworks use, simply because we're not using or focused on documenting them.

###References

Mocha - our test harness
Chai - our main assertion library
Sinon - Spies, Mocks, and Stubs support
Enzyme - testing support for React
Chai-Enzyme - assertion library for React components

###Further Study Topics currently beyond the scope of this doc:

Mounting components with shallow / mount / render using Enzyme

###Initial setup

Install dependencies. Notes:

We use babel-register to transpile our tests into ES6.
This list includes react-addons-test-utils and react-dom, needed for Enzyme if you're on 0.14.0 or higher.

npm install --save-dev mocha chai chai-enzyme enzyme sinon react-addons-test-utils react-dom babel-register

Set up your package.json with a 'test' script. Notes:

The below mocha command assumes test are located in a /test folder at the root of your project.
It also uses --recursive to get at tests in subdirectories. Your setup may need to vary.

"scripts": {
  ...
  "test": "mocha --compilers js:babel-register --recursive"
},

Include relevant headers at the top of any test files you have. You may not need all of these in a given test file, based on what you're testing.

// The suite is run using mocha; we have an alias in package.json that runs it using
// the locally installed verison in node_modules.

// Chai is our general purpose assertion library
import chai from 'chai'
// We import { expect } so we don't have to type 'chai.expect' constantly.
import { expect } from 'chai'
// chai-enzyme is a library of assertions specifically for React
import chaiEnzyme from 'chai-enzyme'
chai.use(chaiEnzyme())
// sinon gives us spies, mocks, and stubs
import sinon from 'sinon'
// we import shallow, mount, and/or render from enzyme - these are the three ways
// we can set up our React components for testing purposes.  More details here: http://airbnb.io/enzyme/docs/api/index.html
import { shallow, mount, render } from 'enzyme'
import React from 'react'

###Sample tests

####Example 1 A simple test using Chai assertions

import chai from 'chai'
import { expect } from 'chai'
import chaiEnzyme from 'chai-enzyme'
chai.use(chaiEnzyme())

describe('Array', function () {
  it('should return -1 when the value is not present', function () {
    expect([1,2,3].indexOf(4)).to.equal(-1)
  })
})

####Example 2 A longer chunk of code setting up a couple simple React tests. While here we're defining a couple React components, usually you'd be using import to bring them in.

import chai from 'chai'
import { expect } from 'chai'
import chaiEnzyme from 'chai-enzyme'
chai.use(chaiEnzyme())
import { shallow } from 'enzyme'
import React from 'react'

var MyComponent = React.createClass(
{ render() {
  return (
    <div className="icon-star">
      <Foo/>
      <Foo/>
      <Foo/>
    </div>
  )
}
})

var Foo = React.createClass(
{ render() {
  return(
    <div></div>
  )
}  
})

describe('<MyComponent />', () => {
  it('should render three <Foo /> components', function() {
    const wrapper = shallow(<MyComponent />)
    expect(wrapper.find(Foo)).to.have.length(3)
  })

  it('should render an `.icon-star`', function() {
    const wrapper = shallow(<MyComponent />)
    expect(wrapper.find('.icon-star')).to.have.length(1)
  })
})

###Writing Tests & Best Practices

Do not use arrow functions with Mocha tests
All tests should be named *.test.js and reside in /test or a subfolder thereof
For readability, favor the use of describe() and it() over context() and specify()

###Mocha Methods & Topics

Async Testing
Sync Testing
Hooks - before(), after(), beforeEach(), afterEach()
Supported BDD-style (Behavior Driven Development) Methods
- describe()
- it()
- before(), after(), beforeEach(), afterEach()

###Chai Methods & Topics

Reference for "Expect" style assertions

###Sinon Methods & Topics

###React Methods & Topics

Shallow / Mount / Render - The three ways to test components with Enzyme
Assertions (via Chai-Enzyme)
Selectors

###To-Do's

Add an example test using Sinon
Detail how you could pull in .JSX tests

CommanderTso/GreatHorn JS Testing CheatSheet.md