import { Component, Suspense, useEffect, useState } from 'react'import type { ReactNode } from 'react'import { fireEvent, render, waitFor } from '@testing-library/react'import { atom, useAtom } from 'jotai'import { getTestProvider, itSkipIfVersionedWrite } from './testUtils'
const Provider = getTestProvider()
const consoleError = console.errorconst errorMessages: string[] = []beforeEach(() => { errorMessages.splice(0) console.error = jest.fn((err) => { const match = /^(.*?)(\n|$)/.exec(err) if (match?.[1]) { errorMessages.push(match[1]) } })})afterEach(() => { console.error = consoleError})
class ErrorBoundary extends Component< { message?: string; children: ReactNode }, { hasError: boolean }> { constructor(props: { message?: string; children: ReactNode }) { super(props) this.state = { hasError: false } } static getDerivedStateFromError() { return { hasError: true } } render() { return this.state.hasError ? ( <div> {this.props.message || 'errored'} <button onClick={() => this.setState({ hasError: false })}> retry </button> </div> ) : ( this.props.children ) }}
it('can throw an initial error in read function', async () => { const errorAtom = atom(() => { throw new Error() })
const Counter = () => { useAtom(errorAtom) return ( <> <div>no error</div> </> ) }
const { findByText } = render( <Provider> <ErrorBoundary> <Counter /> </ErrorBoundary> </Provider> )
await findByText('errored')})
it('can throw an error in read function', async () => { const countAtom = atom(0) const errorAtom = atom((get) => { if (get(countAtom) === 0) { return 0 } throw new Error() })
const Counter = () => { const [, setCount] = useAtom(countAtom) const [count] = useAtom(errorAtom) return ( <> <div>count: {count}</div> <div>no error</div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> ) }
const { getByText, findByText } = render( <Provider> <ErrorBoundary> <Counter /> </ErrorBoundary> </Provider> )
await findByText('no error')
fireEvent.click(getByText('button')) await findByText('errored')})
it('can throw an initial chained error in read function', async () => { const errorAtom = atom(() => { throw new Error() }) const derivedAtom = atom((get) => get(errorAtom))
const Counter = () => { useAtom(derivedAtom) return ( <> <div>no error</div> </> ) }
const { findByText } = render( <Provider> <ErrorBoundary> <Counter /> </ErrorBoundary> </Provider> )
await findByText('errored')})
it('can throw a chained error in read function', async () => { const countAtom = atom(0) const errorAtom = atom((get) => { if (get(countAtom) === 0) { return 0 } throw new Error() }) const derivedAtom = atom((get) => get(errorAtom))
const Counter = () => { const [, setCount] = useAtom(countAtom) const [count] = useAtom(derivedAtom) return ( <> <div>count: {count}</div> <div>no error</div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> ) }
const { getByText, findByText } = render( <Provider> <ErrorBoundary> <Counter /> </ErrorBoundary> </Provider> )
await findByText('no error')
fireEvent.click(getByText('button')) await findByText('errored')})
it('can throw an initial error in async read function', async () => { const errorAtom = atom(async () => { throw new Error() })
const Counter = () => { useAtom(errorAtom) return ( <> <div>no error</div> </> ) }
const { findByText } = render( <Provider> <ErrorBoundary> <Suspense fallback={null}> <Counter /> </Suspense> </ErrorBoundary> </Provider> )
await findByText('errored')})
it('can throw an error in async read function', async () => { const countAtom = atom(0) const errorAtom = atom(async (get) => { if (get(countAtom) === 0) { return 0 } throw new Error() })
const Counter = () => { const [, setCount] = useAtom(countAtom) const [count] = useAtom(errorAtom) return ( <> <div>count: {count}</div> <div>no error</div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> ) }
const { getByText, findByText } = render( <Provider> <ErrorBoundary> <Suspense fallback={null}> <Counter /> </Suspense> </ErrorBoundary> </Provider> )
await findByText('no error')
fireEvent.click(getByText('button')) await findByText('errored')})
itSkipIfVersionedWrite('can throw an error in write function', async () => { const countAtom = atom(0) const errorAtom = atom( (get) => get(countAtom), () => { throw new Error('error_in_write_function') } )
const Counter = () => { const [count, dispatch] = useAtom(errorAtom) const onClick = () => { try { dispatch() } catch (e) { console.error(e) } } return ( <> <div>count: {count}</div> <div>no error</div> <button onClick={onClick}>button</button> </> ) }
const { getByText, findByText } = render( <Provider> <Counter /> </Provider> )
await findByText('no error') expect(errorMessages).not.toContain('Error: error_in_write_function')
fireEvent.click(getByText('button')) expect(errorMessages).toContain('Error: error_in_write_function')})
itSkipIfVersionedWrite( 'can throw an error in async write function', async () => { const countAtom = atom(0) const errorAtom = atom( (get) => get(countAtom), async () => { throw new Error('error_in_async_write_function') } )
const Counter = () => { const [count, dispatch] = useAtom(errorAtom) const onClick = async () => { try { await dispatch() } catch (e) { console.error(e) } } return ( <> <div>count: {count}</div> <div>no error</div> <button onClick={onClick}>button</button> </> ) }
const { getByText, findByText } = render( <Provider> <Suspense fallback={null}> <Counter /> </Suspense> </Provider> )
await findByText('no error') expect(errorMessages).not.toContain('Error: error_in_async_write_function')
fireEvent.click(getByText('button')) await waitFor(() => { expect(errorMessages).toContain('Error: error_in_async_write_function') }) })
itSkipIfVersionedWrite( 'can throw a chained error in write function', async () => { const countAtom = atom(0) const errorAtom = atom( (get) => get(countAtom), () => { throw new Error('chained_err_in_write') } ) const chainedAtom = atom( (get) => get(errorAtom), (_get, set) => { set(errorAtom, null) } )
const Counter = () => { const [count, dispatch] = useAtom(chainedAtom) const onClick = () => { try { dispatch() } catch (e) { console.error(e) } } return ( <> <div>count: {count}</div> <div>no error</div> <button onClick={onClick}>button</button> </> ) }
const { getByText, findByText } = render( <Provider> <Counter /> </Provider> )
await findByText('no error') expect(errorMessages).not.toContain('Error: chained_err_in_write')
fireEvent.click(getByText('button')) expect(errorMessages).toContain('Error: chained_err_in_write') })
itSkipIfVersionedWrite('throws an error while updating in effect', async () => { const countAtom = atom(0)
const Counter = () => { const [, setCount] = useAtom(countAtom) useEffect(() => { try { setCount(() => { throw new Error('err_updating_in_effect') }) } catch (e) { console.error(e) } }, [setCount]) return ( <> <div>no error</div> </> ) }
const { findByText } = render( <Provider> <ErrorBoundary> <Counter /> </ErrorBoundary> </Provider> )
await findByText('no error') expect(errorMessages).toContain('Error: err_updating_in_effect')})
describe('throws an error while updating in effect cleanup', () => { const countAtom = atom(0)
let doubleSetCount = false
const Counter = () => { const [, setCount] = useAtom(countAtom) useEffect(() => { return () => { if (doubleSetCount) { setCount((x) => x + 1) } setCount(() => { throw new Error('err_in_effect_cleanup') }) } }, [setCount]) return ( <> <div>no error</div> </> ) }
const Main = () => { const [hide, setHide] = useState(false) return ( <> <button onClick={() => setHide(true)}>close</button> {!hide && <Counter />} </> ) }
itSkipIfVersionedWrite('[DEV-ONLY] single setCount', async () => { const { getByText, findByText } = render( <Provider> <ErrorBoundary> <Main /> </ErrorBoundary> </Provider> )
await findByText('no error') expect(errorMessages).not.toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]' )
fireEvent.click(getByText('close')) expect(errorMessages).toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]' ) })
itSkipIfVersionedWrite('[DEV-ONLY] dobule setCount', async () => { doubleSetCount = true
const { getByText, findByText } = render( <Provider> <ErrorBoundary> <Main /> </ErrorBoundary> </Provider> )
await findByText('no error') expect(errorMessages).not.toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]' )
fireEvent.click(getByText('close')) expect(errorMessages).toContain( 'Error: Uncaught [Error: err_in_effect_cleanup]' ) })})
describe('error recovery', () => { const createCounter = () => { const counterAtom = atom(0)
const Counter = () => { const [count, setCount] = useAtom(counterAtom) return <button onClick={() => setCount(count + 1)}>increment</button> }
return { Counter, counterAtom } }
it('recovers from sync errors', async () => { const { counterAtom, Counter } = createCounter()
const syncAtom = atom((get) => { const value = get(counterAtom)
if (value === 0) { throw new Error('An error occurred') }
return value })
const Display = () => { return <div>Value: {useAtom(syncAtom)[0]}</div> }
const { getByText, findByText } = render( <Provider> <Counter /> <ErrorBoundary> <Display /> </ErrorBoundary> </Provider> )
await findByText('errored')
fireEvent.click(getByText('increment')) fireEvent.click(getByText('retry')) await findByText('Value: 1') })
it('recovers from async errors', async () => { const { counterAtom, Counter } = createCounter() const asyncAtom = atom(async (get) => { const value = get(counterAtom) await new Promise((r) => setTimeout(r, 100))
if (value === 0) { throw new Error('An error occurred') }
return value })
const Display = () => { return <div>Value: {useAtom(asyncAtom)[0]}</div> }
const { getByText, findByText } = render( <Provider> <Counter /> <ErrorBoundary> <Suspense fallback={null}> <Display /> </Suspense> </ErrorBoundary> </Provider> )
await findByText('errored')
fireEvent.click(getByText('increment')) fireEvent.click(getByText('retry')) await findByText('Value: 1') })})