Testing with Jest: Tip #4

Header-test.jsx

import renderer from 'react-test-renderer'
import Header from '../Header'
import store from '../store'

jest.mock('react-redux-loading-bar', () => {
  const ReactReduxLoadingBar = require.requireActual('react-redux-loading-bar')

  return {
    // Spread out the original module
    ...ReactReduxLoadingBar,
    // Only mock out the React Component
    default: 'LoadingBar'
  }
})

// Override dispatch method of store to a mock function that lets us see what arguments it's called with
store.dispatch = jest.fn()

it('should render correctly and dispatch showLoading during mount', () => {
  // Instead of wrapping in <Provider> you can pass the store directly as a prop 😏
  const component = renderer.create(<Header store={store} />)
  expect(component.toJSON()).toMatchSnapshot()
  expect(store.dispatch.mock.calls).toMatchSnapshot()
})

Header.jsx

import { Component } from 'react'
import { default as LoadingBar, showLoading } from 'react-redux-loading-bar'
import { connect } from 'react-redux'

class Header extends Component {
  componentDidMount() {
    this.props.dispatch(showLoading())
  }
  render() {
    return (
      <header>
        <LoadingBar />
      </header>
    )
  }
}

export default connect()(Header)