title: How to test React ErrorBoundary
body: <p>New to React, but not to test applications.</p>
  <p>I'd like to make sure every time a component throws a error the ErrorBoundary message is displayed. If you don't know what I mean by ErrorBoundary here is a <a href="https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html" rel="noreferrer">link</a>.</p>
  <p>I'm using <a href="https://mochajs.org" rel="noreferrer">Mocha</a> + <a href="http://chaijs.com" rel="noreferrer">Chai</a> + <a href="http://airbnb.io/enzyme/" rel="noreferrer">Enzyme</a>.</p>
  <p>Let's say we need to test <a href="https://codepen.io/gaearon/pen/wqvxGa?editors=0010" rel="noreferrer">React counter example</a> using the following test configuration.</p>
  <h3>Test Configuration</h3>
  <pre class="lang-js prettyprint-override"><code>// DOM
  import jsdom from 'jsdom';
  const {JSDOM} = jsdom;
  const {document} = (new JSDOM('&lt;!doctype html&gt;&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;')).window;
  global.document = document;
  global.window = document.defaultView;
  global.navigator = global.window.navigator;
  
  // Enzyme
  import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  configure({ adapter: new Adapter() });
  
  // Chai
  import chai from 'chai';
  import chaiEnzyme from 'chai-enzyme';
  chai.use(chaiEnzyme());
  </code></pre>
  <h3>UPDATE 1 - Some later thoughts</h3>
  <p>After reading <a href="https://github.com/reactjs/redux/issues/1534" rel="noreferrer">this conversation</a> about the best testing approach for connected components (which touches similar issues) I know I don't have to worry about <code>componentDidCatch</code> catching the error. React is tested enough and that ensures that whenever a error is thrown it will be caught.</p>
  <p>Therefore there are only test two tests:</p>
  <p>1: Make sure ErrorBoundary displays the message if there's any error</p>
  <pre class="lang-js prettyprint-override"><code>// error_boundary_test.js
  import React from 'react';
  import { expect } from 'chai';
  import { shallow } from 'enzyme';
  
  import ErrorBoundary from './some/path/error_boundary';
  
  describe('Error Boundary', ()=&gt;{
      it('generates a error message when an error is caught', ()=&gt;{
          const component = shallow(&lt;ErrorBoundary /&gt;);
          component.setState({
              error: 'error name', 
              errorInfo: 'error info'
          });
          expect(component).to.contain.text('Something went wrong.');
      });
  });
  </code></pre>
  <p>2: Make sure component is wrapped inside the ErrorBoundary (in the <a href="https://codepen.io/gaearon/pen/wqvxGa?editors=0010" rel="noreferrer">React counter example</a> is <code>&lt;App /&gt;</code>, which is misleading. The idea is to do that on the closest parent component).</p>
  <p>Notes: 1) it needs to be done on the parent component, 2) I'm assuming children are simple components, not containers, as it might need more config.
  Further thoughts: this test could be better written using <code>parent</code> instead of <code>descendents</code>...</p>
  <pre class="lang-js prettyprint-override"><code>// error_boundary_test.js
  import React from 'react';
  import { expect } from 'chai';
  import { shallow } from 'enzyme';
  
  import App from './some/path/app';
  
  describe('App', ()=&gt;{
      it('wraps children in ErrorBoundary', ()=&gt;{
          const component = mount(&lt;App /&gt;);
          expect(component).to.have.descendants(ErrorBoundary);
      });
  </code></pre>