Testing with Jest: Tip #11

Notifications-test.jsx

import renderer from 'react-test-renderer'
import NotificationsContainer from '../NotificationsContainer'

// we can just pass through the component since we pass dispatch prop directly
jest.mock('react-redux', () => component => component)

it('should render correctly', () => {
  const dispatch = jest.fn()
  const component = renderer.create(
    <NotificationsContainer dispatch={dispatch} />
  )
  expect(component.toJSON()).toMatchSnapshot()

  expect(dispatch).toHaveBeenCalled()
  expect(dispatch.mock.calls).toMatchSnapshot('dispatch was called correctly')
})

Notifications.jsx

import { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Notifications from './Notifications'

class NotificationsContainer extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired
  }

  componentDidMount() {
    this.props.dispatch({ type: 'REQUEST_NOTIFICATIONS' })
  }

  render() {
    return <Notifications />
  }
}

export default connect()(NotificationsContainer)