Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a605e93

Browse files
authored
Docs for onCaughtError, onRecoverableError and how to test error boundaries (#1424)
1 parent 11290c1 commit a605e93

File tree

2 files changed

+74
-0
lines changed

2 files changed

+74
-0
lines changed

‎docs/react-testing-library/api.mdx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ as these methods:
1212
- [`baseElement`](#baseelement)
1313
- [`hydrate`](#hydrate)
1414
- [`legacyRoot`](#legacyroot)
15+
- [`onCaughtError`](#oncaughterror)
16+
- [`onRecoverableError`](#onrecoverableerror)
1517
- [`wrapper`](#wrapper)
1618
- [`queries`](#queries)
1719
- [`render` Result](#render-result)
@@ -27,6 +29,8 @@ as these methods:
2729
- [`renderHook`](#renderhook)
2830
- [`renderHook` Options](#renderhook-options)
2931
- [`initialProps`](#initialprops)
32+
- [`onCaughtError`](#oncaughterror)
33+
- [`onRecoverableError`](#onrecoverableerror)
3034
- [`wrapper`](#wrapper-1)
3135
- [`renderHook` Result](#renderhook-result)
3236
- [`result`](#result)
@@ -120,6 +124,16 @@ React 17 (i.e.
120124
[`ReactDOM.render`](https://react.dev/reference/react-dom/render)) then you
121125
should enable this option by setting `legacyRoot: true`.
122126

127+
### `onCaughtError`
128+
129+
Callback called when React catches an error in an Error Boundary.
130+
Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).
131+
132+
### `onRecoverableError`
133+
134+
Callback called when React automatically recovers from errors.
135+
Behaves the same as [`onRecoverableError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).
136+
123137
### `wrapper`
124138

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

420+
### `onCaughtError`
421+
422+
Callback called when React catches an error in an Error Boundary.
423+
Behaves the same as [`onCaughtError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).
424+
425+
### `onRecoverableError`
426+
427+
Callback called when React automatically recovers from errors.
428+
Behaves the same as [`onRecoverableError` in `ReactDOMClient.createRoot`](https://react.dev/reference/react-dom/client/createRoot#parameters).
429+
406430
### `renderHook` Options `wrapper`
407431

408432
See [`wrapper` option for `render`](#wrapper)

‎docs/react-testing-library/faq.mdx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,56 @@ as part of the `change` method call.
8181

8282
<details>
8383

84+
<summary>How do I test error boundaries</summary>
85+
86+
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.
87+
88+
Here's an example of how you can test an error boundary:
89+
90+
```jsx
91+
import React from 'react'
92+
import {render, screen} from '@testing-library/react'
93+
94+
class ErrorBoundary extends React.Component {
95+
state = {error: null}
96+
static getDerivedStateFromError(error) {
97+
return {error}
98+
}
99+
render() {
100+
const {error} = this.state
101+
if (error) {
102+
return <div>Something went wrong</div>
103+
}
104+
return this.props.children
105+
}
106+
}
107+
108+
test('error boundary catches error', () => {
109+
const {container} = render(
110+
<ErrorBoundary>
111+
<BrokenComponent />
112+
</ErrorBoundary>,
113+
)
114+
expect(container.textContent).toEqual('Something went wrong.')
115+
})
116+
117+
If the error boundary did not catch the error, the test would fail since the `render` call would throw the error the Component produced.
118+
119+
120+
:::info
121+
122+
React 18 will call `console.error` with an extended error message.
123+
React 19 will call `console.warn` with an extended error message.
124+
125+
To disable the additional `console.warn` call in React 19, you can provide a custom `onCaughtError` callback e.g. `render(<App />, {onCaughtError: () => {}})`
126+
`onCaughtError` is not supported in React 18.
127+
128+
:::
129+
130+
</details>
131+
132+
<details>
133+
84134
<summary>Can I write unit tests with this library?</summary>
85135

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

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /