Fixed async component test

README.md

@@ -1,6 +1,6 @@
 # E-Store
 
-![Coverage](./coverage/coverage.svg)
+<img src="./coverage/coverage.svg" width="170" height="30" alt="Coverage" />
 
 All components have complete code coverage and are fully unit tested. E2E tests are cypress based.
 

src/app/page.test.tsx

@@ -1,26 +1,32 @@
 import { render, screen } from '@testing-library/react';
-import { expect, describe, test, vi } from 'vitest';
+import { expect, describe, test, vi, beforeEach, afterEach } from 'vitest';
 import { Product } from '@/components/ProductItem';
 import Page from './page';
 
+const fetch = vi.fn();
+const actualFetch = global.fetch;
+
 describe('Page', () => {
+  beforeEach(() => {
+    global.fetch = fetch;
+  });
+  afterEach(() => {
+    global.fetch = actualFetch;
+  });
   test('HomePage should show all data', async () => {
+    fetch.mockResolvedValue(createFetchResponse(products));
     const Result = await Page();
     const { container } = render(Result);
     // save snapshot
     expect(container).toMatchSnapshot();
   });
   test('HomePage should show error message if api fails', async () => {
-    const actualFetch = global.fetch;
-    const fetch = vi.fn();
-    global.fetch = vi.fn();
     fetch.mockRejectedValue(new Error('Something went wrong.'));
     const Result = await Page();
     const { container } = render(Result);
     expect(screen.findByText('Unable to get products')).toBeDefined();
     // save snapshot
     expect(container).toMatchSnapshot();
-    global.fetch = actualFetch;
   });
 });
 function createFetchResponse(data: Product[]) {

src/app/page.tsx

@@ -1,5 +1,6 @@
 import { type Product } from '@/components/ProductItem';
 import Products from '@/components/Products';
+import { API_URL } from '@/config';
 import { ProductsProvider } from '@/store';
 
 type ApiResponse = {
@@ -9,9 +10,7 @@ type ApiResponse = {
 
 async function getProducts(): Promise<ApiResponse> {
   try {
-    const products = await fetch(
-      'https://my-json-server.typicode.com/benirvingplt/products/products'
-    ).then((res) => res.json());
+    const products = await fetch(API_URL).then((res) => res.json());
     return { products };
   } catch (error) {
     return { error: 'Unable to get products', products: [] };

src/config/index.ts

@@ -0,0 +1,2 @@
+export const API_URL =
+  'https://my-json-server.typicode.com/benirvingplt/products/products';