Testing with Jest: Tip #3

Select-test.jsx

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

jest.mock('react-select', () => {
  const { createElement } = require('react')
  // Note that since 'react-select' is mocked we have to use
  // require.requireActual, even inside the factory function that mocks it!
  // Just watch the movie Inception and skip to the Dream within a Dream and you'll get it
  const ReactSelect = require.requireActual('react-select')

  // Since we need proptype validation working we need to wrap the mock in a
  // stateless function (or Component, whatever React is able to render)
  const MockedAsync = props => createElement('Async', props)
  MockedAsync.propTypes = ReactSelect.Async.propTypes
  MockedAsync.defaultProps = ReactSelect.Async.defaultProps
  ReactSelect.Async = MockedAsync

  return ReactSelect
})

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

Select.jsx

import { Async } from 'react-select'

// just decorating react-select with default props
// to reduce duplication in the codebase
export default props => <Async labelKey="title" valueKey="uuid" {...props} />