diff --git a/packages/react-google-charts/src/hooks/useLoadScript.ts b/packages/react-google-charts/src/hooks/useLoadScript.ts index fce20a31..39520934 100644 --- a/packages/react-google-charts/src/hooks/useLoadScript.ts +++ b/packages/react-google-charts/src/hooks/useLoadScript.ts @@ -12,14 +12,20 @@ export function useLoadScript(src: string) { const [isSuccess, setIsSuccess] = useState(false); const onLoad = () => { setIsLoading(false); + setError(null); setIsSuccess(true); }; + const onError = (error: Error | null) => { + setError(error); + setIsLoading(false); + setIsSuccess(false); + }; useEffect(() => { if (!document) { const error = new Error( `[ScriptLoadingError] document not defined when attempting to load ${src}`, ); - setError(error); + onError(error); return; } @@ -55,7 +61,7 @@ export function useLoadScript(src: string) { const error = new Error( `[ScriptLoadingError] Failed to load script: ${src}`, ); - setError(error); + onError(error); }); // Add to DOM if not yet added. diff --git a/packages/react-google-charts/test/Chart.spec.tsx b/packages/react-google-charts/test/Chart.spec.tsx index 1eb42578..3fcf003e 100644 --- a/packages/react-google-charts/test/Chart.spec.tsx +++ b/packages/react-google-charts/test/Chart.spec.tsx @@ -15,6 +15,34 @@ describe("", () => { expect(getByText("Loading Chart")).toBeVisible(); }); + it("should render errorElement", async () => { + const { findByText } = render( + Don't Panic} />, + ); + + expect(await findByText("Don't Panic")).toBeVisible(); + + }); + + it("should render loader then errorElement", async () => { + const { getByText, queryByText, findByText } = render( + Loading Chart} + errorElement={
Don't Panic
} />, + ); + + expect(getByText("Loading Chart")).toBeVisible(); + expect(queryByText("Don't Panic")).toBeNull(); + + expect(await findByText("Don't Panic")).toBeVisible(); + expect(queryByText("Loading Chart")).toBeNull(); + }); + it("should draw chart", async () => { const { getByTestId } = render(