scmx · March 1, 2019 08:42 · Mar 22, 2016 · Mar 22, 2016
diff --git a/...ype-warning-as-errors-with-sinon.markdown → ...pe-warnings-as-errors-with-sinon.markdown b/...ype-warning-as-errors-with-sinon.markdown → ...pe-warnings-as-errors-with-sinon.markdown
@@ -56,5 +56,5 @@ describe('<VersionListItem />', () => {
 
 Related reading:
 
-- [Stack Overflow - How to test React PropTypes through Jest?](http://stackoverflow.com/a/31835256/2037928
+- [Stack Overflow - How to test React PropTypes through Jest?](http://stackoverflow.com/a/31835256/2037928)
 - [Gist by jsdf - Make React PropType warnings throw errors in Jasmine/Jest](https://gist.github.com/jsdf/6fc35890e4ed4a219072)
diff --git a/react-proptype-warning-as-errors-with-sinon.markdown b/react-proptype-warning-as-errors-with-sinon.markdown
@@ -0,0 +1,60 @@
+# 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.
+
+```javascript
+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
+```
+
+```javascript
+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:
+
+- [Stack Overflow - How to test React PropTypes through Jest?](http://stackoverflow.com/a/31835256/2037928
+- [Gist by jsdf - Make React PropType warnings throw errors in Jasmine/Jest](https://gist.github.com/jsdf/6fc35890e4ed4a219072)