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. :)
})
})
Related reading:
FWIW (and a bite late to the conversation), but I found this to be helpful in our test setup/helper file
The
.callThrough()
is necessary to ensureconsole.error()
's default behavior is used for all warnings that don't match the custom match function.