render()

in fixtures/dom/src/components/fixtures/error-handling/index.js [259:405]

• 139 lines of code
• 2 McCabe index (conditional complexity)

  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);
            }}
          />
        </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. You should also see our addendum ("The above
            error...").
          </TestCase.ExpectedResult>
          <TriggerErrorAndCatch />
        </TestCase>
        <TestCase
          title="Recoverable errors can be silenced with preventDefault (development mode only)"
          description="">
          <TestCase.Steps>
            <li>Check the "Silence errors" checkbox below</li>
            <li>Click the "Throw (render phase)" button</li>
            <li>Click the "Throw (commit phase)" button</li>
            <li>Uncheck the "Silence errors" checkbox</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            Open the console. You shouldn't see <b>any</b> messages in the
            console: neither the browser error, nor our "The above error"
            addendum, from either of the buttons. The buttons themselves should
            get replaced by two labels: "Captured an error: Silenced error
            (render phase)" and "Captured an error: Silenced error (commit
            phase)".
          </TestCase.ExpectedResult>
          <SilenceRecoverableError />
        </TestCase>
        <TestCase
          title="Fatal errors cannot be silenced with preventDefault (development mode only)"
          description="">
          <TestCase.Steps>
            <li>Check the "Silence errors" checkbox below</li>
            <li>Click the "Throw fatal error" button</li>
            <li>Uncheck the "Silence errors" checkbox</li>
          </TestCase.Steps>
          <TestCase.ExpectedResult>
            Open the console. "Error: Caught error" should have been logged by
            React. You should also see our addendum ("The above error...").
          </TestCase.ExpectedResult>
          <TrySilenceFatalError />
        </TestCase>

        {window.hasOwnProperty('event') ? (
          <TestCase
            title="Error handling does not interfere with window.event"
            description="">
            <TestCase.Steps>
              <li>Click the "Trigger callback in event" button</li>
            </TestCase.Steps>
            <TestCase.ExpectedResult>
              You should see "Got <b>click</b> event" and "Event cleared
              successfully" below.
            </TestCase.ExpectedResult>
            <GetEventTypeDuringUpdate />
          </TestCase>
        ) : null}
      </FixtureSet>
    );
  }