Make React PropType warnings throw errors with enzyme.js + sinon.js + mocha.js

A simple stateless functional component that we want to test that it renders without propType warnings.

import React, { PropTypes } from 'react'

let VersionListItem = function ({ active, version }) {
  return (
    <a href='#' className={`list-group-item ${active}`}>
      <strong
        className='list-group-item-heading'>
        Version {version}
      </strong>
    </a>
  )
}
VersionListItem.propTypes = {
  active: PropTypes.string,
  version: PropTypes.number
}
export default VersionListItem

import { describe, it, before, after } from 'mocha'
import sinon from 'sinon'
import React from 'react'
import { shallow } from 'enzyme'
import VersionListItem from './version-list-item'

// Since react will console.error propType warnings, that which we'd rather have
// as errors, we use sinon.js to stub it into throwing these warning as errors
// instead.
before(() => {
  sinon.stub(console, 'error', (warning) => { throw new Error(warning) })
})
// While not forgetting to restore it afterwards
after(() => { console.error.restore() })

describe('<VersionListItem />', () => {
  const props = {
    active: 'active',
    version: 1
  }

  it('renders without error', () => {
    shallow(<VersionListItem {...props} />)
    // In this case there is no need for an assertion since we're only
    // interested in not getting any errors. And mocha will mark the test as a
    // failure if an error is thrown. :)
  })
})

n0z3r0/react-proptype-warnings-as-errors-with-sinon.markdown

Make React PropType warnings throw errors with enzyme.js + sinon.js + mocha.js