diff --git a/src/__tests__/getMarkupFromTree-test.tsx b/src/__tests__/getMarkupFromTree-test.tsx index e0fd52c..ed57b62 100644 --- a/src/__tests__/getMarkupFromTree-test.tsx +++ b/src/__tests__/getMarkupFromTree-test.tsx @@ -6,6 +6,7 @@ import * as React from 'react'; import { renderToString } from 'react-dom/server'; import { ApolloProvider } from '../ApolloContext'; +import { TestErrorBoundary } from '../__testutils__/TestErrorBoundary'; import createClient from '../__testutils__/createClient'; import { getMarkupFromTree } from '../getMarkupFromTree'; import { QueryHookOptions, useQuery } from '../useQuery'; @@ -82,9 +83,11 @@ interface UserWrapperProps extends QueryHookOptions<{}> { function UserDetailsWrapper({ client, ...props }: UserWrapperProps) { return ( - - - + + + + + ); } @@ -351,6 +354,21 @@ it('should handle errors thrown by queries without suspense', async () => { ); }); +it('should handle errors thrown by queries with suspense', async () => { + const client = createMockClient(linkReturningError); + const tree = ; + + await expect( + getMarkupFromTree({ tree, renderFunction: renderToString }) + ).rejects.toMatchInlineSnapshot( + `[Error: Network error: Simulating network error]` + ); + + expect(renderToString(tree)).toMatchInlineSnapshot( + `"No Current User (failed)"` + ); +}); + it('should correctly skip queries with suspense', async () => { const client = createMockClient(); diff --git a/src/__testutils__/TestErrorBoundary.tsx b/src/__testutils__/TestErrorBoundary.tsx new file mode 100644 index 0000000..9e73b37 --- /dev/null +++ b/src/__testutils__/TestErrorBoundary.tsx @@ -0,0 +1,31 @@ +import React, { Component, ReactNode } from 'react'; + +interface Props { + readonly children: ReactNode; +} + +interface State { + readonly error?: Error; +} + +export class TestErrorBoundary extends Component { + public static getDerivedStateFromError(error: Error): State { + return { error }; + } + + public constructor(props: Readonly) { + super(props); + + this.state = {}; + } + + public render(): React.ReactNode { + const { error } = this.state; + + if (error) { + return <>TestErrorBoundary: {error.message}; + } + + return this.props.children; + } +}