Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs for onCaughtError, onRecoverableError and how to test error boundaries #1424

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/react-testing-library/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ as these methods:
- [`baseElement`](#baseelement)
- [`hydrate`](#hydrate)
- [`legacyRoot`](#legacyroot)
- [`onCaughtError`](#oncaughterror)
- [`onRecoverableError`](#onrecoverableerror)
- [`wrapper`](#wrapper)
- [`queries`](#queries)
- [`render` Result](#render-result)
Expand All @@ -27,6 +29,8 @@ as these methods:
- [`renderHook`](#renderhook)
- [`renderHook` Options](#renderhook-options)
- [`initialProps`](#initialprops)
- [`onCaughtError`](#oncaughterror)
- [`onRecoverableError`](#onrecoverableerror)
- [`wrapper`](#wrapper-1)
- [`renderHook` Result](#renderhook-result)
- [`result`](#result)
Expand Down Expand Up @@ -120,6 +124,16 @@ React 17 (i.e.
[`ReactDOM.render`](https://react.dev/reference/react-dom/render)) then you
should enable this option by setting `legacyRoot: true`.

### `onCaughtError`

Callback called when React catches an error in an Error Boundary.
Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).

### `onRecoverableError`

Callback called when React automatically recovers from errors.
Behaves the same as [`onRecoverableError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).

### `wrapper`

Pass a React Component as the `wrapper` option to have it rendered around the
Expand Down Expand Up @@ -403,6 +417,16 @@ test('returns logged in user', () => {
> }
> ```

### `onCaughtError`

Callback called when React catches an error in an Error Boundary.
Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).

### `onRecoverableError`

Callback called when React automatically recovers from errors.
Behaves the same as [`onRecoverableError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).

### `renderHook` Options `wrapper`

See [`wrapper` option for `render`](#wrapper)
Expand Down
50 changes: 50 additions & 0 deletions docs/react-testing-library/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,56 @@ as part of the `change` method call.

<details>

<summary>How do I test error boundaries</summary>

To test if an error boundary successfully catches an error, you should make sure that if the fallback of the boundary is displayed when a child threw.

Here's an example of how you can test an error boundary:

```jsx
import React from 'react'
import {render, screen} from '@testing-library/react'

class ErrorBoundary extends React.Component {
state = {error: null}
static getDerivedStateFromError(error) {
return {error}
}
render() {
const {error} = this.state
if (error) {
return <div>Something went wrong</div>
}
return this.props.children
}
}

test('error boundary catches error', () => {
const {container} = render(
<ErrorBoundary>
<BrokenComponent />
</ErrorBoundary>,
)
expect(container.textContent).toEqual('Something went wrong.')
})

If the error boundary did not catch the error, the test would fail since the `render` call would throw the error the Component produced.


:::info

React 18 will call `console.error` with an extended error message.
React 19 will call `console.warn` with an extended error message.

To disable the additional `console.warn` call in React 19, you can provide a custom `onCaughtError` callback e.g. `render(<App />, {onCaughtError: () => {}})`
`onCaughtError` is not supported in React 18.

:::

</details>

<details>

<summary>Can I write unit tests with this library?</summary>

Definitely yes! You can write unit and integration tests with this library. See
Expand Down