From 97ca67194a6833913256f8a4d99ee22de551bf8e Mon Sep 17 00:00:00 2001
From: dima <dmivanov487@gmail.com>
Date: Fri, 24 Oct 2025 15:53:02 +0200
Subject: [PATCH 1/2] added unit and integration tests

---
 .babelrc                                      |   7 +
 components/__tests__/BackToTopButton.test.tsx |  41 ++++
 components/__tests__/Contributors.test.tsx    |  37 ++++
 components/__tests__/Footer.test.tsx          |  35 ++++
 components/__tests__/Header.test.tsx          | 186 ++++++++++++++++++
 components/__tests__/LazyImage.test.tsx       |  39 ++++
 components/__tests__/LoadingPage.test.tsx     |  48 +++++
 components/__tests__/TawkToChat.test.tsx      |  42 ++++
 components/__tests__/ThemeSelector.test.tsx   |  31 +++
 components/layout/Header.tsx                  |  35 ++--
 jest.config.js                                |  12 ++
 package.json                                  |  21 +-
 setupTests.ts                                 |   1 +
 tsconfig.json                                 |   4 +-
 types/jest-dom.d.ts                           |   1 +
 15 files changed, 521 insertions(+), 19 deletions(-)
 create mode 100644 .babelrc
 create mode 100644 components/__tests__/BackToTopButton.test.tsx
 create mode 100644 components/__tests__/Contributors.test.tsx
 create mode 100644 components/__tests__/Footer.test.tsx
 create mode 100644 components/__tests__/Header.test.tsx
 create mode 100644 components/__tests__/LazyImage.test.tsx
 create mode 100644 components/__tests__/LoadingPage.test.tsx
 create mode 100644 components/__tests__/TawkToChat.test.tsx
 create mode 100644 components/__tests__/ThemeSelector.test.tsx
 create mode 100644 jest.config.js
 create mode 100644 setupTests.ts
 create mode 100644 types/jest-dom.d.ts

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 00000000..c2b9ef10
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}
diff --git a/components/__tests__/BackToTopButton.test.tsx b/components/__tests__/BackToTopButton.test.tsx
new file mode 100644
index 00000000..a6892837
--- /dev/null
+++ b/components/__tests__/BackToTopButton.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { beforeAll, beforeEach, describe, expect, jest, test } from '@jest/globals'
+import BackToTopButton from '../buttons/BackToTopButton'
+import '@testing-library/jest-dom'
+
+describe('BackToTopButton Test', () => {
+  beforeAll(() => {
+    window.scrollTo = jest.fn()
+
+    Object.defineProperty(window, 'scrollY', { value: 0, writable: true })
+  })
+
+  test('Not displayed when scrollY < 300', () => {
+    render(<BackToTopButton />)
+    fireEvent.scroll(window)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  test('Displayed when scrollY > 300', () => {
+    render(<BackToTopButton />)
+    Object.defineProperty(window, 'scrollY', { value: 400, writable: true })
+    fireEvent.scroll(window)
+    expect(screen.getByRole('button'))
+  })
+
+  test('When clicked, it calls scrollTo with the correct parameters', () => {
+    render(<BackToTopButton />)
+    Object.defineProperty(window, 'scrollY', { value: 400, writable: true })
+    fireEvent.scroll(window)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    expect(window.scrollTo).toHaveBeenCalledWith({
+      top: 0,
+      behavior: 'smooth'
+    })
+  })
+})
+
diff --git a/components/__tests__/Contributors.test.tsx b/components/__tests__/Contributors.test.tsx
new file mode 100644
index 00000000..60d95013
--- /dev/null
+++ b/components/__tests__/Contributors.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { describe, expect, test } from '@jest/globals'
+import { Contributors } from '../index/Contributors'
+
+describe('Contributors', () => {
+  const mockContributors = [
+    { id: '1', url: 'https://github.com/alice', avatar: '/alice.png', name: 'Alice' },
+    { id: '2', url: 'https://github.com/bob', avatar: '/bob.png', name: 'Bob' }
+  ]
+
+  test('renders all contributor images', () => {
+    render(<Contributors contributors={mockContributors} />)
+
+    const aliceImage = screen.getByAltText('Alice')
+    const bobImage = screen.getByAltText('Bob')
+
+    expect(aliceImage).not.toBeNull()
+    expect(bobImage).not.toBeNull()
+
+    const aliceLink = screen.getByRole('link', { name: /alice/i })
+    const bobLink = screen.getByRole('link', { name: /bob/i })
+
+    expect(aliceLink.getAttribute('href')).toBe('https://github.com/alice')
+    expect(bobLink.getAttribute('href')).toBe('https://github.com/bob')
+  })
+
+  test('renders fallback when image fails to load', () => {
+    render(<Contributors contributors={mockContributors} />)
+
+    const aliceImage = screen.getByAltText('Alice')
+    fireEvent.error(aliceImage)
+
+    const fallback = screen.getByText('A')
+    expect(fallback).not.toBeNull()
+  })
+})
diff --git a/components/__tests__/Footer.test.tsx b/components/__tests__/Footer.test.tsx
new file mode 100644
index 00000000..0b23f68f
--- /dev/null
+++ b/components/__tests__/Footer.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import Footer from '../layout/Footer'
+
+jest.mock('../buttons/Coffee', () => () => <div data-testid="coffee-button" />)
+jest.mock('../buttons/Sponsor', () => () => <div data-testid="sponsor-button" />)
+
+describe('Footer', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve({ stargazers_count: 123 })
+      } as Response)
+    ) as jest.Mock
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  test('renders footer links and components', async () => {
+    render(<Footer />)
+
+    expect(screen.getByText('Technology')).toBeInTheDocument()
+    expect(screen.getByText('Information')).toBeInTheDocument()
+    expect(screen.getByText('Helpful Links')).toBeInTheDocument()
+
+    expect(screen.getByTestId('coffee-button')).toBeInTheDocument()
+    expect(screen.getByTestId('sponsor-button')).toBeInTheDocument()
+
+    await waitFor(() => {
+      expect(screen.getByText('123')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/components/__tests__/Header.test.tsx b/components/__tests__/Header.test.tsx
new file mode 100644
index 00000000..70c25c9a
--- /dev/null
+++ b/components/__tests__/Header.test.tsx
@@ -0,0 +1,186 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import { useUser } from '@clerk/nextjs'
+import { useRouter } from 'next/router'
+import Header from '../layout/Header'
+
+jest.mock('@clerk/nextjs', () => ({
+  useUser: jest.fn(),
+  UserButton: jest.fn(() => <div data-testid="user-button" />),
+}))
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}))
+
+describe('Header component', () => {
+  const pushMock = jest.fn()
+  const onMock = jest.fn()
+  const offMock = jest.fn()
+
+  beforeEach(() => {
+    (useRouter as jest.Mock).mockReturnValue({
+      push: pushMock,
+      events: { on: onMock, off: offMock },
+    })
+
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve({ stargazers_count: 123 }),
+      }) as any
+    )
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const renderHeader = async () => {
+    await act(async () => {
+      render(<Header />)
+    })
+  }
+
+  test('renders logo and main links', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+
+    await renderHeader()
+
+    expect(screen.getAllByAltText('Logo')[0]).toBeInTheDocument()
+    expect(screen.getByText('Languages')).toBeInTheDocument()
+    expect(screen.getByText('Frameworks')).toBeInTheDocument()
+    expect(screen.getByText('Git')).toBeInTheDocument()
+    expect(screen.getByText('Roadmap')).toBeInTheDocument()
+    expect(screen.getAllByText('Sign In')[0]).toBeInTheDocument()
+  })
+
+  test('fetches GitHub stars and displays them', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+
+    await renderHeader()
+
+    await waitFor(() => {
+      expect(screen.getAllByText('123')[0]).toBeInTheDocument()
+    })
+  })
+
+  test('toggles dropdown menus', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+
+    await renderHeader()
+
+    const languagesButton = screen.getByText('Languages')
+    fireEvent.click(languagesButton)
+    expect(screen.getByText('JavaScript')).toBeInTheDocument()
+
+    fireEvent.click(languagesButton)
+    expect(screen.queryByText('JavaScript')).not.toBeInTheDocument()
+  })
+
+  test('navigates when dropdown item clicked', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+
+    await renderHeader()
+
+    fireEvent.click(screen.getByText('Languages'))
+    fireEvent.click(screen.getByText('JavaScript'))
+    expect(pushMock).toHaveBeenCalledWith('/languages/javascript')
+  })
+
+  test('mobile menu toggles', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+    await renderHeader()
+
+    const menuButton = screen.getByTestId('mobile-menu-button')
+
+    fireEvent.click(menuButton)
+    await waitFor(() => {
+      const lang = screen.getAllByText('Languages')
+      expect(lang.length).toBeGreaterThan(0)
+    })
+
+    fireEvent.click(menuButton)
+    await waitFor(() => {
+      const lang = screen.queryAllByText('Languages')
+      expect(lang.length).toBeGreaterThan(0)
+    })
+  })
+
+  test('renders UserButton if user is logged in', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: { id: '1' }, isLoaded: true })
+
+    await renderHeader()
+
+    expect(screen.getByTestId('user-button')).toBeInTheDocument()
+  })
+
+  test('handles fetch error gracefully', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+    ;(global.fetch as jest.Mock).mockRejectedValueOnce(new Error('Network error'))
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    await renderHeader()
+
+    await waitFor(() => {
+      expect(errorSpy).toHaveBeenCalled()
+    })
+    errorSpy.mockRestore()
+  })
+
+  test('registers and cleans up router.events listeners', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+
+    const { unmount } = render(<Header />)
+
+    await waitFor(() => {
+      expect(onMock).toHaveBeenCalledWith('routeChangeStart', expect.any(Function))
+    })
+
+    unmount()
+    expect(offMock).toHaveBeenCalledWith('routeChangeStart', expect.any(Function))
+  })
+
+  test('toggleSideNav opens and closes side navigation', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+    await renderHeader()
+
+    const menuButton = screen.getByTestId('mobile-menu-button')
+    fireEvent.click(menuButton)
+    fireEvent.click(menuButton)
+    expect(menuButton).toBeInTheDocument()
+  })
+
+  test('dispatches custom event when dropdowns open', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+    const eventSpy = jest.fn()
+    window.addEventListener('dropdownOpened', eventSpy)
+
+    await renderHeader()
+
+    const langBtn = screen.getAllByText('Languages')[0]
+    const fwBtn = screen.getAllByText('Frameworks')[0]
+    const gitBtn = screen.getAllByText('Git')[0]
+    const roadmapBtn = screen.getAllByText('Roadmap')[0]
+
+    fireEvent.click(langBtn)
+    fireEvent.click(fwBtn)
+    fireEvent.click(gitBtn)
+    fireEvent.click(roadmapBtn)
+
+    expect(eventSpy).toHaveBeenCalledTimes(4)
+
+    window.removeEventListener('dropdownOpened', eventSpy)
+  })
+
+  test('navigates for framework', async () => {
+    ;(useUser as jest.Mock).mockReturnValue({ user: null, isLoaded: true })
+
+    await renderHeader()
+
+    const fwBtn = screen.getAllByText('Frameworks')[0]
+    fireEvent.click(fwBtn)
+    fireEvent.click(await screen.findByText('React'))
+    expect(pushMock).toHaveBeenCalledWith('/frameworks/react')
+
+
+  })
+})
diff --git a/components/__tests__/LazyImage.test.tsx b/components/__tests__/LazyImage.test.tsx
new file mode 100644
index 00000000..ff27ba5a
--- /dev/null
+++ b/components/__tests__/LazyImage.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { useInView } from 'react-intersection-observer'
+import { describe, expect, test } from '@jest/globals'
+import React from 'react'
+import LazyImage from '../index/LazyImage'
+
+jest.mock('react-intersection-observer', () => ({
+  useInView: jest.fn()
+}))
+
+const mockedUseInView = useInView as unknown as jest.Mock
+
+describe('LazyImage', () => {
+  const mockProps = {
+    src: '/test.png',
+    alt: 'Test Image',
+    width: 100,
+    height: 100
+  }
+
+  test('does not render image when not in view', () => {
+    mockedUseInView.mockReturnValue({ ref: jest.fn(), inView: false })
+
+    render(<LazyImage {...mockProps} />)
+
+    expect(screen.queryByAltText('Test Image')).toBeNull()
+  })
+
+  test('renders image when in view', () => {
+    mockedUseInView.mockReturnValue({ ref: jest.fn(), inView: true })
+
+    render(<LazyImage {...mockProps} />)
+
+    const img = screen.getByAltText('Test Image')
+    expect(img).not.toBeNull()
+    expect(img?.getAttribute('src')).toContain('test.png')
+  })
+})
diff --git a/components/__tests__/LoadingPage.test.tsx b/components/__tests__/LoadingPage.test.tsx
new file mode 100644
index 00000000..af765f3c
--- /dev/null
+++ b/components/__tests__/LoadingPage.test.tsx
@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import LoadingPage from '../layout/LoadingPage'
+import { useRouter } from 'next/router'
+import { act } from 'react-dom/test-utils'
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}))
+
+describe('LoadingPage', () => {
+  let pushMock: jest.Mock
+
+  beforeEach(() => {
+    jest.useFakeTimers()
+    pushMock = jest.fn()
+    ;(useRouter as jest.Mock).mockReturnValue({
+      push: pushMock,
+    })
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    jest.useRealTimers()
+  })
+
+  test('renders logo, title, bouncing dots and redirect text', () => {
+    render(<LoadingPage />)
+
+    expect(screen.getByAltText('FCM Logo')).toBeInTheDocument()
+
+    expect(screen.getByText('Welcome to Fork, Commit, Merge')).toBeInTheDocument()
+
+    expect(screen.getByText('Redirecting you to the homepage...')).toBeInTheDocument()
+
+    const dots = document.querySelectorAll('.animate-bounce')
+    expect(dots.length).toBe(3)
+  })
+
+  test('redirects to home after 3 seconds', () => {
+    render(<LoadingPage />)
+
+    act(() => {
+      jest.advanceTimersByTime(3000)
+    })
+
+    expect(pushMock).toHaveBeenCalledWith('/')
+  })
+})
diff --git a/components/__tests__/TawkToChat.test.tsx b/components/__tests__/TawkToChat.test.tsx
new file mode 100644
index 00000000..24f0a8b5
--- /dev/null
+++ b/components/__tests__/TawkToChat.test.tsx
@@ -0,0 +1,42 @@
+import { render, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { afterEach, beforeAll, beforeEach, describe, expect, jest, test } from '@jest/globals'
+import TawkToChat from '../chat/TawkToChat'
+
+describe('TawkToChat Test', () => {
+  beforeEach(() => {
+    const existingScript = document.createElement('script')
+    document.head.appendChild(existingScript)
+  })
+
+  afterEach(() => {
+    cleanup()
+    document.querySelectorAll('script').forEach(s => s.remove())
+    document.querySelectorAll('style').forEach(s => s.remove())
+  })
+
+  test('Adds Tawk.to script and style on mount', () => {
+    render(<TawkToChat />)
+
+    const script = document.querySelector('script[src*="tawk.to"]') as HTMLScriptElement | null
+    expect(script).not.toBeNull()
+    expect(script?.async).toBe(true)
+    expect(script?.charset).toBe('UTF-8')
+    expect(script?.getAttribute('crossorigin')).toBe('*')
+
+    const style = document.querySelector('style') as HTMLStyleElement | null
+    expect(style).not.toBeNull()
+    expect(style?.textContent).toContain('#tawkto-container')
+  })
+
+  test('Removes Tawk.to script and style on unmount', () => {
+    const { unmount } = render(<TawkToChat />)
+    unmount()
+
+    const script = document.querySelector('script[src*="tawk.to"]') as HTMLScriptElement | null
+    const style = document.querySelector('style') as HTMLStyleElement | null
+
+    expect(script).toBeNull()
+    expect(style).toBeNull()
+  })
+})
diff --git a/components/__tests__/ThemeSelector.test.tsx b/components/__tests__/ThemeSelector.test.tsx
new file mode 100644
index 00000000..ccc978e5
--- /dev/null
+++ b/components/__tests__/ThemeSelector.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import ThemeSelector from '../ui/ThemeSelector'
+
+describe('ThemeSelector', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    document.documentElement.className = ''
+  })
+
+  test('renders with default theme', () => {
+    render(<ThemeSelector />)
+    const button = screen.getByRole('button')
+    expect(button).toHaveTextContent('dark')
+    expect(document.documentElement.classList.contains('theme-dark')).toBe(true)
+  })
+
+  test('toggles theme on click', () => {
+    render(<ThemeSelector />)
+    const button = screen.getByRole('button')
+
+    fireEvent.click(button)
+    expect(button).toHaveTextContent('light')
+    expect(document.documentElement.classList.contains('theme-light')).toBe(true)
+    expect(localStorage.getItem('theme')).toBe('light')
+
+    fireEvent.click(button)
+    expect(button).toHaveTextContent('dark')
+    expect(document.documentElement.classList.contains('theme-dark')).toBe(true)
+    expect(localStorage.getItem('theme')).toBe('dark')
+  })
+})
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 7a8eddbc..78255c38 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -118,7 +118,7 @@ const Header = () => {
   }
 
   return (
-    <nav className='border-b border-gray-200 bg-gray-100  shadow-md dark:border-gray-900'>
+    <nav className='border-b border-gray-200 bg-gray-100 shadow-md dark:border-gray-900'>
       <div className='modern-container'>
         <div className='flex h-16 items-center justify-between'>
           <div className='flex items-center space-x-8'>
@@ -141,7 +141,9 @@ const Header = () => {
                     className='flex items-center transition-colors duration-200 hover:text-[var(--accent-color)]'
                     style={{ color: 'var(--fc-primary)' }}
                   >
-                    <span className='font-medium hover:text-blue-400'>Languages</span>
+                    <span className='font-medium hover:text-blue-400'>
+                      Languages
+                    </span>
                     <svg
                       className={`ml-1 h-4 w-4 transition-transform duration-200 ${isLanguageDropdownOpen ? 'rotate-180' : ''}`}
                       fill='none'
@@ -189,7 +191,9 @@ const Header = () => {
                     className='flex items-center transition-colors duration-200 hover:text-[var(--accent-color)]'
                     style={{ color: 'var(--fc-primary)' }}
                   >
-                    <span className='font-medium hover:text-blue-400'>Frameworks</span>
+                    <span className='font-medium hover:text-blue-400'>
+                      Frameworks
+                    </span>
                     <svg
                       className={`ml-1 h-4 w-4 transition-transform duration-200 ${isFrameworkDropdownOpen ? 'rotate-180' : ''}`}
                       fill='none'
@@ -285,7 +289,9 @@ const Header = () => {
                     className='flex items-center transition-colors duration-200 hover:text-[var(--accent-color)]'
                     style={{ color: 'var(--fc-primary)' }}
                   >
-                    <span className='font-medium hover:text-blue-400'>Roadmap</span>
+                    <span className='font-medium hover:text-blue-400'>
+                      Roadmap
+                    </span>
                     <svg
                       className={`ml-1 h-4 w-4 transition-transform duration-200 ${isRoadmapDropdownOpen ? 'rotate-180' : ''}`}
                       fill='none'
@@ -377,8 +383,9 @@ const Header = () => {
 
           <div className='md:hidden'>
             <button
+              data-testid='mobile-menu-button'
               onClick={toggleSideNav}
-              className='text-gray-700 hover:text-modern-purple'
+              className='hover:text-modern-purple text-gray-700'
             >
               {isOpen ? (
                 <XMarkIcon className='h-6 w-6' />
@@ -397,7 +404,7 @@ const Header = () => {
             <div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
               <button
                 onClick={toggleLanguageDropdown}
-                className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
+                className='hover:text-modern-purple flex w-full items-center justify-between dark:text-gray-200'
                 style={{ color: 'var(--fc-primary)' }}
               >
                 <span>Languages</span>
@@ -421,7 +428,7 @@ const Header = () => {
                     <button
                       key={language.name}
                       onClick={() => navigateToLanguage(language.link)}
-                      className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
+                      className='hover:text-modern-purple block w-full py-1 text-left text-sm dark:text-gray-200'
                       style={{ color: 'var(--fc-primary)' }}
                     >
                       {language.name}
@@ -434,7 +441,7 @@ const Header = () => {
             <div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
               <button
                 onClick={toggleFrameworkDropdown}
-                className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
+                className='hover:text-modern-purple flex w-full items-center justify-between dark:text-gray-200'
                 style={{ color: 'var(--fc-primary)' }}
               >
                 <span>Frameworks</span>
@@ -458,7 +465,7 @@ const Header = () => {
                     <button
                       key={framework.name}
                       onClick={() => navigateToFramework(framework.link)}
-                      className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
+                      className='hover:text-modern-purple block w-full py-1 text-left text-sm dark:text-gray-200'
                       style={{ color: 'var(--fc-primary)' }}
                     >
                       {framework.name}
@@ -471,7 +478,7 @@ const Header = () => {
             <div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
               <button
                 onClick={toggleGitSelectionDropdown}
-                className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
+                className='hover:text-modern-purple flex w-full items-center justify-between dark:text-gray-200'
                 style={{ color: 'var(--fc-primary)' }}
               >
                 <span>Git</span>
@@ -495,7 +502,7 @@ const Header = () => {
                     <button
                       key={git.name}
                       onClick={() => navigateToGitSelection(git.link)}
-                      className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
+                      className='hover:text-modern-purple block w-full py-1 text-left text-sm dark:text-gray-200'
                       style={{ color: 'var(--fc-primary)' }}
                     >
                       {git.name}
@@ -508,7 +515,7 @@ const Header = () => {
             <div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
               <button
                 onClick={toggleRoadmapDropdown}
-                className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
+                className='hover:text-modern-purple flex w-full items-center justify-between dark:text-gray-200'
                 style={{ color: 'var(--fc-primary)' }}
               >
                 <span>Roadmap</span>
@@ -532,7 +539,7 @@ const Header = () => {
                     <button
                       key={roadmap.name}
                       onClick={() => navigateToRoadmap(roadmap.link)}
-                      className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
+                      className='hover:text-modern-purple block w-full py-1 text-left text-sm dark:text-gray-200'
                       style={{ color: 'var(--fc-primary)' }}
                     >
                       {roadmap.name}
@@ -560,7 +567,7 @@ const Header = () => {
                 href='https://github.com/fork-commit-merge/fork-commit-merge'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='flex items-center text-gray-700 transition-colors hover:text-modern-purple'
+                className='hover:text-modern-purple flex items-center text-gray-700 transition-colors'
               >
                 <svg
                   className='mr-1 h-5 w-5'
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 00000000..7bc8565b
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,12 @@
+export default {
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(t|j)sx?$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
+}
diff --git a/package.json b/package.json
index f035922c..33ac63dc 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest --coverage"
   },
   "engines": {
     "node": "22.x"
@@ -16,6 +17,9 @@
     "@clerk/nextjs": "^4.31.5",
     "@clerk/themes": "^2.2.3",
     "@heroicons/react": "^2.0.18",
+    "@jest/globals": "^29.7.0",
+    "@testing-library/react": "^16.3.0",
+    "expect": "^29.7.0",
     "framer-motion": "^12.0.0",
     "next": "^14.1.0",
     "react": "18.3.1",
@@ -23,16 +27,25 @@
     "react-intersection-observer": "^9.15.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/jest": "^30.0.0",
     "@types/node": "24.7.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "typescript": "5.9.3",
+    "autoprefixer": "10.4.21",
+    "babel-jest": "^29.7.0",
     "eslint": "9.37.0",
     "eslint-config-next": "15.5.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "8.5.6",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "3.4.15",
-    "postcss": "8.5.6",
-    "autoprefixer": "10.4.21"
+    "ts-jest": "^29.4.5",
+    "typescript": "5.9.3"
   }
 }
diff --git a/setupTests.ts b/setupTests.ts
new file mode 100644
index 00000000..010b0b5d
--- /dev/null
+++ b/setupTests.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 682046dc..5d33cfa6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -14,6 +14,8 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "types": ["jest", "@testing-library/jest-dom"],
+    "typeRoots": ["./node_modules/@types", "./src/types"],
     "plugins": [
       {
         "name": "next"
diff --git a/types/jest-dom.d.ts b/types/jest-dom.d.ts
new file mode 100644
index 00000000..010b0b5d
--- /dev/null
+++ b/types/jest-dom.d.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
\ No newline at end of file

From 8697286427032c8747be1eba82f2dd9793cee73e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niko=20Hoffr=C3=A9n?= <niko.hoffren@gmail.com>
Date: Fri, 24 Oct 2025 18:52:48 +0300
Subject: [PATCH 2/2] fix: resolve build issues in create-tests branch

- Fix package.json: remove duplicate ESLint entries and move testing deps to devDependencies
- Fix TypeScript configuration: remove @testing-library/jest-dom from global types
- Remove Babel configuration to allow Next.js SWC compiler
- Update Jest configuration to use ts-jest instead of babel-jest
- Resolve ESLint and TypeScript compilation errors
---
 .babelrc         |  7 -------
 eslint.config.js | 24 ++++++++++++------------
 jest.config.js   | 10 +++++++++-
 package.json     | 14 ++++++--------
 tsconfig.json    |  2 +-
 5 files changed, 28 insertions(+), 29 deletions(-)
 delete mode 100644 .babelrc

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index c2b9ef10..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "presets": [
-    ["@babel/preset-env", { "targets": { "node": "current" } }],
-    ["@babel/preset-react", { "runtime": "automatic" }],
-    "@babel/preset-typescript"
-  ]
-}
diff --git a/eslint.config.js b/eslint.config.js
index 69dbd280..8c56223f 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,21 +1,21 @@
-import { FlatCompat } from '@eslint/eslintrc';
-import js from '@eslint/js';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
+import path from 'path'
+import { fileURLToPath } from 'url'
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const compat = new FlatCompat({
   baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-});
+  recommendedConfig: js.configs.recommended
+})
 
 export default [
   ...compat.extends('next/core-web-vitals'),
   {
     rules: {
-      '@typescript-eslint/no-explicit-any': 'warn',
-    },
-  },
-];
+      '@typescript-eslint/no-explicit-any': 'warn'
+    }
+  }
+]
diff --git a/jest.config.js b/jest.config.js
index 7bc8565b..24aa960e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,7 @@
 export default {
   testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(t|j)sx?$': 'babel-jest',
+    '^.+\\.(t|j)sx?$': 'ts-jest',
   },
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
@@ -9,4 +9,12 @@ export default {
   },
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
   testPathIgnorePatterns: ['/node_modules/', '/.next/'],
+  preset: 'ts-jest',
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        jsx: 'react-jsx',
+      },
+    },
+  },
 }
diff --git a/package.json b/package.json
index 25216305..01958412 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,7 @@
     "@ant-design/icons": "^6.0.0",
     "@clerk/nextjs": "^4.31.5",
     "@clerk/themes": "^2.2.3",
-    "@eslint/eslintrc": "^3.3.1",
     "@heroicons/react": "^2.0.18",
-    "@jest/globals": "^29.7.0",
-    "@testing-library/react": "^16.3.0",
-    "expect": "^29.7.0",
     "framer-motion": "^12.0.0",
     "next": "^14.1.0",
     "react": "18.3.1",
@@ -31,19 +27,21 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",
     "@types/node": "24.7.2",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.21",
     "babel-jest": "^29.7.0",
-    "eslint": "9.37.0",
-    "eslint-config-next": "15.5.5",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "eslint": "9.38.0",
     "eslint-config-next": "15.5.6",
+    "expect": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "8.5.6",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.7.1",
diff --git a/tsconfig.json b/tsconfig.json
index 5d33cfa6..b473b1b4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "types": ["jest", "@testing-library/jest-dom"],
+    "types": ["jest"],
     "typeRoots": ["./node_modules/@types", "./src/types"],
     "plugins": [
       {