more unit tests

src/app/__tests__/page.test.tsx

@@ -1,6 +1,11 @@
 import { render, screen } from '@testing-library/react'
+import reposMock from '../../../tests/__fixtures__/repos.json'
 import Page from '../page'
 
+jest.mock('../../lib/getRepos', () => ({
+  getRepos: jest.fn().mockImplementation(() => reposMock)
+}))
+
 describe('app: /page', () => {
   it('renders correctly', async () => {
     render(await Page())

src/components/Location/Location.tsx

@@ -9,8 +9,24 @@ import { Flag } from './Flag'
 import styles from './Location.module.css'
 import { UseLocation } from './types'
 
-export default function Location() {
+function Animation({ children }: { children: React.ReactNode }) {
   const shouldReduceMotion = useReducedMotion()
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <m.section
+        aria-label="Location"
+        variants={fadeIn}
+        className={styles.location}
+        {...getAnimationProps(shouldReduceMotion)}
+      >
+        {children}
+      </m.section>
+    </LazyMotion>
+  )
+}
+
+export default function Location() {
   const [isPending, startTransition] = useTransition()
   const [location, setLocation] = useState<UseLocation | null>(null)
 
@@ -27,40 +43,33 @@ export default function Location() {
   return (
     <div className={styles.wrapper}>
       {!isPending && location?.now?.city ? (
-        <LazyMotion features={domAnimation}>
+        <Animation>
-          <m.section
+          <Flag
-            aria-label="Location"
+            country={{
-            variants={fadeIn}
+              code: location.now.country_code,
-            className={styles.location}
+              name: location.now.country
-            {...getAnimationProps(shouldReduceMotion)}
+            }}
-          >
+          />
-            <Flag
+          {location.now.city} <span>Now</span>
-              country={{
+          <div className={styles.next}>
-                code: location.now.country_code,
+            {location?.next?.city && (
-                name: location.now.country
+              <>
-              }}
+                {isDifferentCountry && (
-            />
+                  <Flag
-            {location.now.city} <span>Now</span>
+                    country={{
-            <div className={styles.next}>
+                      code: location.next.country_code,
-              {location?.next?.city && (
+                      name: location.next.country
-                <>
+                    }}
-                  {isDifferentCountry && (
+                  />
-                    <Flag
+                )}
-                      country={{
+                {location.next.city}{' '}
-                        code: location.next.country_code,
+                <span>
-                        name: location.next.country
+                  {relativeTime.from(new Date(location.next.date_start))}
-                      }}
+                </span>
-                    />
+              </>
-                  )}
+            )}
-                  {location.next.city}{' '}
+          </div>
-                  <span>
+        </Animation>
-                    {relativeTime.from(new Date(location.next.date_start))}
-                  </span>
-                </>
-              )}
-            </div>
-          </m.section>
-        </LazyMotion>
       ) : null}
     </div>
   )

src/lib/getRepos.test.ts

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import fetch, { FetchMock } from 'jest-fetch-mock'
+import repoFilter from '@content/repos.json'
+import { getRepos } from './getRepos'
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  cache: (fn) => fn
+}))
+
+describe('getRepos', () => {
+  beforeEach(() => {
+    fetch.resetMocks()
+  })
+
+  it('should fetch repos data', async () => {
+    const mockData = {
+      name: 'test',
+      full_name: 'test/test',
+      description: 'test repo',
+      html_url: 'https://github.com/test/test',
+      homepage: 'https://test.com',
+      stargazers_count: 100,
+      pushed_at: '2022-01-01T00:00:00Z'
+    }
+    ;(fetch as FetchMock).mockResponse(JSON.stringify(mockData))
+
+    const data = await getRepos()
+    const count = repoFilter.length
+
+    expect(data).toEqual(Array.from({ length: count }, () => mockData))
+    expect(fetch).toHaveBeenCalledTimes(count)
+  })
+
+  it('should handle network errors', async () => {
+    let consoleErrorMock: jest.SpyInstance
+    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
+    ;(fetch as FetchMock).mockRejectOnce(new Error('Network error'))
+
+    const data = await getRepos()
+
+    expect(data).toBeUndefined()
+    expect(fetch).toHaveBeenCalledTimes(1)
+
+    consoleErrorMock.mockRestore()
+  })
+
+  it('should handle invalid repo data', async () => {
+    const mockData = { name: null }
+    ;(fetch as FetchMock).mockResponseOnce(JSON.stringify(mockData))
+
+    const data = await getRepos()
+
+    expect(data).toBeUndefined()
+    expect(fetch).toHaveBeenCalledTimes(1)
+  })
+})

tests/jest.setup.ts

@@ -3,7 +3,6 @@ import '@testing-library/jest-dom'
 import fetchMock from 'jest-fetch-mock'
 import giphyMock from './__fixtures__/giphy.json'
 import { dataLocation } from './__fixtures__/location'
-import reposMock from './__fixtures__/repos.json'
 import './__mocks__/matchMedia'
 
 fetchMock.enableMocks()
@@ -23,10 +22,6 @@ jest.mock('../src/lib/getRandomGif', () => ({
     .mockImplementation(() => giphyMock.data.images.original.mp4)
 }))
 
-jest.mock('../src/lib/getRepos', () => ({
-  getRepos: jest.fn().mockImplementation(() => reposMock)
-}))
-
 const unmockedFetch = global.fetch
 const unmockedEnv = process.env