<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">I'm not quite sure if feature/bug... I have an error boundary, and I want to test that it works correctly, but it produces a big <code class="notranslate">console.error</code> and there doesn't seem a great way to get around it.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When an error is captured by the error boundary, it still logs to console during tests, making it look like something failed but it is expected (because I am testing error boundary) in this case.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    console.error node_modules/react-dom/cjs/react-dom.development.js:9747
      The above error occurred in the &lt;Child&gt; component:
          in Child (at ErrorBoundary.test.jsx:20)
          in ErrorBoundary (created by WrapperComponent)
          in WrapperComponent

      React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary."><pre class="notranslate"><code class="notranslate">    console.error node_modules/react-dom/cjs/react-dom.development.js:9747
      The above error occurred in the &lt;Child&gt; component:
          in Child (at ErrorBoundary.test.jsx:20)
          in ErrorBoundary (created by WrapperComponent)
          in WrapperComponent

      React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto">Error  Boundary:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;
import PropTypes from &quot;prop-types&quot;;

export default class ErrorBoundary extends React.Component {
  static propTypes = {
    children: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.arrayOf(PropTypes.node)
    ]).isRequired,
    render: PropTypes.func.isRequired
  };

  state = {
    hasError: false,
    error: null,
    errorInfo: null
  };

  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true, error, errorInfo });

    // if we have Bugsnag in this environment, we can notify our error tracker
    if (window.Bugsnag) {
      window.Bugsnag.notify(error);
    }
  }

  render() {
    if (this.state.hasError) {
      return this.props.render(this.state.error, this.state.errorInfo);
    }
    return this.props.children;
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">PropTypes</span> <span class="pl-k">from</span> <span class="pl-s">"prop-types"</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-v">ErrorBoundary</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-c1">propTypes</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">children</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-en">oneOfType</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
      <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">,</span>
      <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-en">arrayOf</span><span class="pl-kos">(</span><span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">)</span>
    <span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span><span class="pl-kos">,</span>
    <span class="pl-c1">render</span>: <span class="pl-v">PropTypes</span><span class="pl-kos">.</span><span class="pl-c1">func</span><span class="pl-kos">.</span><span class="pl-c1">isRequired</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">hasError</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">error</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span>
    <span class="pl-c1">errorInfo</span>: <span class="pl-c1">null</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-en">componentDidCatch</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">,</span> <span class="pl-s1">errorInfo</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">hasError</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> error<span class="pl-kos">,</span> errorInfo <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-c">// if we have Bugsnag in this environment, we can notify our error tracker</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">Bugsnag</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">Bugsnag</span><span class="pl-kos">.</span><span class="pl-en">notify</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">hasError</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">error</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">errorInfo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">ErrorBoundary.test.jsx</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import ErrorBoundary from &quot;./ErrorBoundary&quot;;

const Child = () =&gt; {
  throw &quot;error&quot;;
};

it(&quot;catches error and renders message&quot;, () =&gt; {
  const wrapper = mount(
    &lt;ErrorBoundary render={() =&gt; &lt;div&gt;Error has occurred&lt;/div&gt;}&gt;
      &lt;Child /&gt;
    &lt;/ErrorBoundary&gt;
  );

  expect(wrapper.text()).toEqual(&quot;Error has occurred&quot;);
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">ErrorBoundary</span> <span class="pl-k">from</span> <span class="pl-s">"./ErrorBoundary"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">Child</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">throw</span> <span class="pl-s">"error"</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">"catches error and renders message"</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">wrapper</span> <span class="pl-c1">=</span> <span class="pl-en">mount</span><span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">ErrorBoundary</span> <span class="pl-c1">render</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Error has occurred<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-v">Child</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ErrorBoundary</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">wrapper</span><span class="pl-kos">.</span><span class="pl-en">text</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toEqual</span><span class="pl-kos">(</span><span class="pl-s">"Error has occurred"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I'm not sure exactly... here is a way I can sort of temporarily pause <code class="notranslate">console.error</code> logging during the course of the test, but it seems messy. How should error boundaries be tested?</p>
<p dir="auto">Here is a <em>hacky</em> solution:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import ErrorBoundary from &quot;./ErrorBoundary&quot;;

const Child = () =&gt; {
  throw &quot;error&quot;;
};

const pauseErrorLogging = codeToRun =&gt; {
  const logger = console.error;
  console.error = () =&gt; {};

  codeToRun();

  console.error = logger;
};

it(&quot;catches error and renders message&quot;, () =&gt; {
  pauseErrorLogging(() =&gt; {
    const wrapper = mount(
      &lt;ErrorBoundary render={() =&gt; &lt;div&gt;Error has occurred&lt;/div&gt;}&gt;
        &lt;Child /&gt;
      &lt;/ErrorBoundary&gt;
    );

    expect(wrapper.text()).toEqual(&quot;Error has occurred&quot;);
  });
});"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">ErrorBoundary</span> <span class="pl-k">from</span> <span class="pl-s">"./ErrorBoundary"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">Child</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">throw</span> <span class="pl-s">"error"</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">pauseErrorLogging</span> <span class="pl-c1">=</span> <span class="pl-s1">codeToRun</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">logger</span> <span class="pl-c1">=</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">error</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">error</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-en">codeToRun</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">error</span> <span class="pl-c1">=</span> <span class="pl-s1">logger</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">"catches error and renders message"</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-en">pauseErrorLogging</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">wrapper</span> <span class="pl-c1">=</span> <span class="pl-en">mount</span><span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">ErrorBoundary</span> <span class="pl-c1">render</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Error has occurred<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-v">Child</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ErrorBoundary</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">wrapper</span><span class="pl-kos">.</span><span class="pl-en">text</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toEqual</span><span class="pl-kos">(</span><span class="pl-s">"Error has occurred"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">16.2 (with enzyme 3.3)</p>
<hr>
<p dir="auto"><strong>(This is a repost of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="262802629" data-permission-text="Title is private" data-url="https://github.com/jestjs/jest/issues/4597" data-hovercard-type="issue" data-hovercard-url="/jestjs/jest/issues/4597/hovercard" href="https://github.com/jestjs/jest/issues/4597">jestjs/jest#4597</a> by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/erikras/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/erikras">@erikras</a>.)</strong></p>
<hr>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Somewhere in between?</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When I'm running tests on <a href="https://github.com/erikras/redux-form">my library</a>, there are some behaviors that I want to test <em>do</em> throw an error. These currently result in:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries."><pre class="notranslate"><code class="notranslate">Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
</code></pre></div>
<p dir="auto">...being output to the console. This error is great in an application, but not so great for a library test.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It would be great if I could do something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="expect(() =&gt; {
  TestUtils.renderIntoDocument(&lt;DoSomething naughty/&gt;)
})
.toThrow(/Bad developer!/)
.andCatch() // &lt;---- prevents React 16 error boundary warning"><pre class="notranslate"><span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-v">TestUtils</span><span class="pl-kos">.</span><span class="pl-en">renderIntoDocument</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">DoSomething</span> <span class="pl-c1">naughty</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">toThrow</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>Bad developer!<span class="pl-c1">/</span></span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">andCatch</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c">// &lt;---- prevents React 16 error boundary warning</span></pre></div>
<p dir="auto"><strong>Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="jest@21.2.1
react@16.0.0
react-dom@16.0.0"><pre class="notranslate"><code class="notranslate">jest@21.2.1
react@16.0.0
react-dom@16.0.0
</code></pre></div>
<p dir="auto"><strong>See also</strong></p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="262782704" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11083" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/11083/hovercard" href="https://github.com/facebook/react/issues/11083">#11083</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="250734072" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/10474" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/10474/hovercard?comment_id=334164834&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/10474#issuecomment-334164834">#10474 (comment)</a></li>
</ul>