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:
If you're only interested on testing PropTypes shouldn't you omit calling shallow and just write <VersionListItem {...props} /> ?
Works for me and keeps the test case simple (with just one concern).