Add test case that demonstrates errors are logged even if they're caught

Author: acdlite

fixtures/dom/src/components/fixtures/error-handling/index.js

@@ -1,4 +1,5 @@
 const React = window.React;
+const ReactDOM = window.ReactDOM;
 
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
@@ -56,6 +57,34 @@ class Example extends React.Component {
   }
 }
 
+class TriggerErrorAndCatch extends React.Component {
+  container = document.createElement('div');
+
+  triggerErrorAndCatch = () => {
+    // Use setImmediate so that the render is syncrhonous
+    setImmediate(() => {
+      try {
+        ReactDOM.render(
+          <BadRender
+            throws={() => {
+              throw new Error('Caught error');
+            }}
+          />,
+          this.container
+        );
+      } catch (e) {}
+    });
+  };
+
+  render() {
+    return (
+      <button onClick={this.triggerErrorAndCatch}>
+        Trigger error and catch
+      </button>
+    );
+  }
+}
+
 export default class ErrorHandlingTestCases extends React.Component {
   render() {
     return (
@@ -119,6 +148,17 @@ export default class ErrorHandlingTestCases extends React.Component {
             }}
           />
         </TestCase>
+        <TestCase
+          title="Errors are logged even if they're caught (development mode only)"
+          description="">
+          <TestCase.Steps>
+            <li>Click the "Trigger render error and catch" button</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Open the console. "Uncaught Error: Caught error" should have been logged by the browser.
+          </TestCase.ExpectedResult>
+          <TriggerErrorAndCatch />
+        </TestCase>
       </FixtureSet>
     );
   }