test: add test on fetch error

Author: sectsect

apps/solidjs-boilerplate/src/components/modules/PostList/PostList.test.tsx

@@ -106,8 +106,19 @@ describe('PostList component', () => {
     // ⚠ `vi.mock` is "hoisted" @ https://vitest.dev/api/vi.html
     // try vi.doMock. It works the same way but isn't hoisted.
     // https://vitest.dev/api/vi.html#vi-domock
+    // vi.doMock('@/hooks/useFetchPostList', () => ({
+    //   default: vi.fn().mockRejectedValue({ status: 'error' }),
+    // }));
+
+    // Mock the API call to reject
     vi.doMock('@/hooks/useFetchPostList', () => ({
-      default: vi.fn().mockRejectedValue({ status: 'error' }),
+      default: vi.fn().mockReturnValue({
+        // data: undefined,
+        isLoading: false,
+        isError: true,
+        error: { status: 'error' },
+        status: 'error',
+      }),
     }));
 
     const queryClient = new QueryClient({
@@ -150,10 +161,13 @@ describe('PostList component', () => {
 
     // await waitFor(() => {
     //   expect(result.isError).toBe(true);
-    //   // expect(result.error).toEqual({ status: 'error' });
     // });
 
+    await waitFor(() => {
+      expect(result.error).toEqual({ status: 'error' });
+    });
+
     // expect(result.data).toBeUndefined();
-    // expect(screen.getByText('Error fetching data')).toBeInTheDocument();
+    // expect(screen.getByText('Error: Failed to fetch data')).toBeInTheDocument();
   });
 });

apps/solidjs-boilerplate/src/components/modules/PostList/PostList.tsx

@@ -1,5 +1,5 @@
 import type { Component } from 'solid-js';
-import { Switch, Match, For } from 'solid-js';
+import { ErrorBoundary, Suspense, For } from 'solid-js';
 
 import { A } from '@solidjs/router';
 import toast from 'solid-toast';
@@ -15,8 +15,6 @@ const PostList: Component = () => {
     toast.error('Failed to fetch data.');
   }
 
-  console.log(query);
-
   // w/ createResource()
   // const [posts, { refetch }] = createResource<Post[]>(fetchData);
 
@@ -30,14 +28,10 @@ const PostList: Component = () => {
 
       <section>
         <div class="inner">
-          <Switch>
-            <Match when={query.isLoading}>
-              <div>Loading...</div>
-            </Match>
-            <Match when={query.isError}>
-              <div>Error: {(query.error as Error).message}</div>
-            </Match>
-            <Match when={query.isSuccess}>
+          <ErrorBoundary
+            fallback={<div>Error: {(query.error as Error).message}</div>}
+          >
+            <Suspense fallback={<div>Loading...</div>}>
               <ul>
                 <For each={query.data}>
                   {post => (
@@ -47,8 +41,8 @@ const PostList: Component = () => {
                   )}
                 </For>
               </ul>
-            </Match>
-          </Switch>
+            </Suspense>
+          </ErrorBoundary>
         </div>
       </section>
 

apps/solidjs-boilerplate/src/hooks/useFetchPostList.tsx

@@ -1,16 +1,30 @@
+import type { CreateQueryResult } from '@tanstack/solid-query';
 import { createQuery } from '@tanstack/solid-query';
 
 import type { Post } from '@/types/api/post.interface';
 
+// import type { Post } from '@/types/api/post.interface';
+
 const apiEndpointUrl = import.meta.env.VITE_PUBLIC_API_URL;
 
-const fetchData = async (): Promise<Post[]> =>
-  (await fetch(`${apiEndpointUrl}/posts`)).json();
+// const fetchData = async (): Promise<Post[]> =>
+//   (await fetch(`${apiEndpointUrl}/posts`)).json();
 
 const useFetchPostList = () => {
-  const query = createQuery(() => ({
+  // const query = createQuery(() => ({
+  //   queryKey: ['/posts'],
+  //   queryFn: fetchData,
+  // }));
+
+  const query: CreateQueryResult<Post[], Error> = createQuery(() => ({
     queryKey: ['/posts'],
-    queryFn: fetchData,
+    queryFn: async () => {
+      const result = await fetch(`${apiEndpointUrl}/posts`);
+      if (!result.ok) throw new Error('Failed to fetch data');
+      return result.json();
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    throwOnError: true, // Throw an error if the query fails
   }));
 
   return query;