Test

• Jest is use as test runner

Install

$ npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer

Coverage

$ jest --coverage

Action Creator

Thunk middleware, which is tested

  helloWorld : () => {
    return (dispatch, getState) => {
      return dispatch({
        type: HELLO_WORLD,
      })
    }
  }

as

import helloActionCreator from '../../src/actions/index.js'

describe('helloActionCreator', () => {
  it('should create an action for HelloWorld', () => {
      const dispatch = jest.fn();
      helloActionCreator.helloWorld()(dispatch, {});
      expect(dispatch).toBeCalledWith({ type: 'HELLO_WORLD' });
  })
})

Container

Testing a container is more work, because components, reducers and actionCreater is entangled:

const mapStateToProps = (state, ownProps) => {
  return {
    ...
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    ...
  }
}
const hello = connect(
  mapStateToProps,
  mapDispatchToProps
)(Hello)
export default hello

Test as

import { Provider } from 'react-redux'
import { createStore, compose, applyMiddleware } from 'redux'
import { shallow, mount } from 'enzyme'
import React from 'react'
import thunk from 'redux-thunk'

import reducer from '../../src/reducers'
import TargetContainer from '../../src/containers/TargetContainer.js'



let store = createStore(
    reducer, 
    compose(applyMiddleware(thunk))
)

const enzymeWrapper =  mount(
    <Provider store={store}>
        <TargetContainer />
    </Provider>)


describe('containers', () => {
    it('should render self and subcomponents', () => {
        enzymeWrapper.find('button').simulate('click');
        expect(enzymeWrapper.find('h1').text()).toBe( ... )
    })
})

Reference

https://gist.github.com/kolodny/50e7384188bb5dc41ebb https://facebook.github.io/jest/docs/tutorial-react.html