In this article, we will analyze ErrorBoundary class component in Zustand’s test case. Error handling is a crucial part of any React application.
Overview of the Test Case
Here’s the test case we’ll be exploring:
// Picked from https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L378
it('can throw an error in equality checker', async () => {
console.error = vi.fn()
type State = { value: string | number }
const initialState: State = { value: 'foo' }
const useBoundStore = createWithEqualityFn(() => initialState, Object.is)
const { setState } = useBoundStore
const selector = (s: State) => s
const equalityFn = (a: State, b: State) =>
// @ts-expect-error This function is supposed to throw an error
a.value.trim() === b.value.trim()
class ErrorBoundary extends ClassComponent<
{ children?: ReactNode | undefined },
{ hasError: boolean }
> {
constructor(props: { children?: ReactNode | undefined }) {
super(props)
this.state = { hasError: false }
}
static getDerivedStateFromError() {
return { hasError: true }
}
render() {
return this.state.hasError ? <div>errored</div> : this.props.children
}
}
function Component() {
useBoundStore(selector, equalityFn)
return <div>no error</div>
}
const { findByText } = render(
<StrictMode>
<ErrorBoundary>
<Component />
</ErrorBoundary>
</StrictMode>,
)
await findByText('no error')
act(() => {
setState({ value: 123 })
})
await findByText('errored')
})
This test verifies that when an error occurs inside an equality checker, the error is caught and handled gracefully by an ErrorBoundary
component.
Key Concepts in the Test Case
1. Zustand’s createWithEqualityFn
Zustand allows you to define stores with custom equality functions using createWithEqualityFn
. In this test, the initial state is defined as:
const initialState: State = { value: 'foo' }
The createWithEqualityFn
function is used to create a store where the equality function is defined to compare states based on whether the value
property is equal. In this case, the equality checker is intentionally set to throw an error when value
is of a type other than string
:
You can intentionally throw errors in your test cases to ensure your code handles errors as expected.
const equalityFn = (a: State, b: State) =>
a.value.trim() === b.value.trim() // Throws error if 'value' is not a string
The test case expects this equality function to fail when value
becomes a number
, causing the error handler to come into play.
2. Custom ErrorBoundary
Component
React’s ErrorBoundary
component is a common pattern used to catch JavaScript errors in a component tree, and Zustand has taken this approach to test how errors within their state management are handled. This particular test case defines a custom ErrorBoundary
component directly inside the test. I mean, how often do you come across a test case that has the custom ErrorBoundary with in a “test case”?
class ErrorBoundary extends ClassComponent<
{ children?: ReactNode | undefined },
{ hasError: boolean }
> {
constructor(props: { children?: ReactNode | undefined }) {
super(props)
this.state = { hasError: false }
}
static getDerivedStateFromError() {
return { hasError: true }
}
render() {
return this.state.hasError ? <div>errored</div> : this.props.children
}
}
How it works:
The component uses the lifecycle method
getDerivedStateFromError()
to catch errors and update its state (hasError
) totrue
.If an error is detected, the component renders
<div>errored</div>
. Otherwise, it renders its children.
In typical production use, ErrorBoundary
components are created as reusable elements to catch and display errors across the application. However, embedding the ErrorBoundary
directly inside a test case like this provides fine-grained control over error testing, allowing you to assert that the component reacts correctly when errors occur in specific parts of the application.
3. Testing Error Handling with Vitest
In this test case, Vitest is used as the testing framework. Here’s how it works with Zustand:
-
Rendering the Component: The
Component
that uses theuseBoundStore
hook is rendered inside theErrorBoundary
within a ReactStrictMode
block. This ensures that errors inside the equality checker can be caught.
const { findByText } = render(
<StrictMode>
<ErrorBoundary>
<Component />
</ErrorBoundary>
</StrictMode>,
)
await findByText('no error')
At this point, the test verifies that no error has been thrown yet and checks for the text
no error
.Triggering the Error: After the component is initially rendered without errors, the test triggers an error by updating the store’s state to a
number
:
act(() => { setState({ value: 123 }) })
This causes the equality function to throw an error, as
value.trim()
is no longer valid for anumber
type.Asserting the Error Handling: Once the error is thrown, the
ErrorBoundary
catches it, and the test waits for the UI to render theerrored
message:
await findByText('errored')
- This assertion confirms that the error was properly caught and displayed by the
ErrorBoundary
Why This Approach is Unique
What makes this test case particularly interesting is the use of an inline ErrorBoundary
component within a unit test. Typically, error boundaries are part of the main React app, wrapping components in the main render tree. However, Zustand's approach to create an error boundary in the test suite itself offers a more flexible and isolated way to test how errors are handled under specific conditions.
By directly controlling the boundary within the test, Zustand ensures:
Granularity: The test can focus on how errors in a particular part of the application (like the equality checker) are handled, without needing to rely on global error boundaries.
Test Isolation: The
ErrorBoundary
exists only within the scope of this test, reducing potential side effects or dependencies on the app’s broader error-handling logic.
About us:
At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.
10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.
We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)
Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!
Top comments (0)