Testando com Jest: Dica #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 {
    // Operação "spread" do módulo original
    ...ReactReduxLoadingBar,
    //  Mockamos apenas o componente React
    default: 'LoadingBar'
  }
})

// Sobrescrevendo o método dispatch da nossa store para mockar a função que
// nos permite ver qual argumento foi usando na chamada da função
store.dispatch = jest.fn()

it('should render correctly and dispatch showLoading during mount', () => {
  // Ao invés de envolver em um <Provider> nós podemos passar a store diretamente como 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)