ErrorHandlingTestCases Class — react Architecture

Source Code

fixtures/dom/src/components/fixtures/error-handling/index.js lines 258–406

export default class ErrorHandlingTestCases extends React.Component {
  render() {
    return (
      <FixtureSet title="Error handling">
        <TestCase
          title="Break on uncaught exceptions"
          description="In DEV, errors should be treated as uncaught, even though React catches them internally">
          <TestCase.Steps>
            <li>Open the browser DevTools</li>
            <li>Make sure "Pause on exceptions" is enabled</li>
            <li>Make sure "Pause on caught exceptions" is disabled</li>
            <li>Click the "Trigger error" button</li>
            <li>Click the reset button</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            The DevTools should pause at the line where the error was thrown, in
            the BadRender component. After resuming, the "Trigger error" button
            should be replaced with "Captured an error: Oops!" Clicking reset
            should reset the test case.
            <br />
            <br />
            In the console, you should see <b>two</b> messages: the actual error
            ("Oops") printed natively by the browser with its JavaScript stack,
            and our addendum ("The above error occurred in BadRender component")
            with a React component stack.
          </TestCase.ExpectedResult>
          <Example
            doThrow={() => {
              throw new Error('Oops!');
            }}
          />
        </TestCase>
        <TestCase title="Throwing null" description="">
          <TestCase.Steps>
            <li>Click the "Trigger error" button</li>
            <li>Click the reset button</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            The "Trigger error" button should be replaced with "Captured an
            error: null". Clicking reset should reset the test case.
          </TestCase.ExpectedResult>
          <Example
            doThrow={() => {
              throw null; // eslint-disable-line no-throw-literal
            }}
          />
        </TestCase>
        <TestCase title="Throwing memoized result" description="">
          <TestCase.Steps>
            <li>Click the "Trigger error" button</li>
            <li>Click the reset button</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            The "Trigger error" button should be replaced with "Captured an
            error: Passed". Clicking reset should reset the test case.
          </TestCase.ExpectedResult>
          <Example
            doThrow={() => {
              memoizedFunction().value;
            }}
          />
        </TestCase>
        <TestCase
          title="Cross-origin errors (development mode only)"
          description="">
          <TestCase.Steps>
            <li>Click the "Trigger cross-origin error" button</li>
            <li>Click the reset button</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            The "Trigger error" button should be replaced with "Captured an
            error: A cross-origin error was thrown [...]". The actual error
            message should be logged to the console: "Uncaught Error: Expected
            true to be false".
          </TestCase.ExpectedResult>
          <Example
            buttonText="Trigger cross-origin error"
            doThrow={() => {
              // The `expect` module is loaded via unpkg, so that this assertion
              // triggers a cross-origin error
              window.expect(true).toBe(false);