diff --git a/src/components/CodeBox/CodeBox.tsx b/src/components/CodeBox.tsx
similarity index 100%
rename from src/components/CodeBox/CodeBox.tsx
rename to src/components/CodeBox.tsx
diff --git a/src/components/CodeBox/index.tsx b/src/components/CodeBox/index.tsx
deleted file mode 100644
index 76867764..00000000
--- a/src/components/CodeBox/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import CodeBox from "./CodeBox";
-
-export default CodeBox;
\ No newline at end of file
diff --git a/src/components/Collapse/Collapse.tsx b/src/components/Collapse.tsx
similarity index 100%
rename from src/components/Collapse/Collapse.tsx
rename to src/components/Collapse.tsx
diff --git a/src/components/Collapse/index.tsx b/src/components/Collapse/index.tsx
deleted file mode 100644
index 2b5b0a3b..00000000
--- a/src/components/Collapse/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Collapse from './Collapse';
-
-export default Collapse;
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment.tsx
similarity index 100%
rename from src/components/Comment/Comment.tsx
rename to src/components/Comment.tsx
diff --git a/src/components/Comment/index.tsx b/src/components/Comment/index.tsx
deleted file mode 100644
index dad9bfdc..00000000
--- a/src/components/Comment/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Comment from './Comment';
-
-export default Comment;
diff --git a/src/components/Container/Container.tsx b/src/components/Container.tsx
similarity index 100%
rename from src/components/Container/Container.tsx
rename to src/components/Container.tsx
diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx
deleted file mode 100644
index 2418286d..00000000
--- a/src/components/Container/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Container from './Container';
-
-export default Container;
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading.tsx
similarity index 97%
rename from src/components/Heading/Heading.tsx
rename to src/components/Heading.tsx
index 9afcc502..0954bb9a 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import cn from '@/utils/cn';
-import Link from '../Link';
+import Link from './Link';
 
 type HTMLHeadingProps = HTMLAttributes<HTMLHeadingElement>;
 
diff --git a/src/components/Heading/index.tsx b/src/components/Heading/index.tsx
deleted file mode 100644
index 418cd969..00000000
--- a/src/components/Heading/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Heading from './Heading';
-
-export * from './Heading';
-
-export default Heading;
diff --git a/src/components/Image/Image.tsx b/src/components/Image.tsx
similarity index 100%
rename from src/components/Image/Image.tsx
rename to src/components/Image.tsx
diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
deleted file mode 100644
index 8954dae5..00000000
--- a/src/components/Image/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Image from "./Image";
-
-export default Image;
diff --git a/src/components/Link/Link.tsx b/src/components/Link.tsx
similarity index 100%
rename from src/components/Link/Link.tsx
rename to src/components/Link.tsx
diff --git a/src/components/Link/index.tsx b/src/components/Link/index.tsx
deleted file mode 100644
index 18a19536..00000000
--- a/src/components/Link/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Link from './Link';
-
-export default Link;
diff --git a/src/components/List/List.tsx b/src/components/List.tsx
similarity index 100%
rename from src/components/List/List.tsx
rename to src/components/List.tsx
diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx
deleted file mode 100644
index 1e2ddb43..00000000
--- a/src/components/List/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import List from './List';
-
-export default List;
diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents.tsx
similarity index 97%
rename from src/components/TableOfContents/TableOfContents.tsx
rename to src/components/TableOfContents.tsx
index a0a71a36..3c4b2995 100644
--- a/src/components/TableOfContents/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -4,8 +4,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 
 import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import cn from '@/utils/cn';
-import Collapse from '../Collapse';
-import Link from '../Link';
+import Collapse from './Collapse';
+import Link from './Link';
 
 type TableOfContentsProps = {
   targetId: `#${string}`;
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
deleted file mode 100644
index 70ced778..00000000
--- a/src/components/TableOfContents/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import TableOfContents from "./TableOfContents";
-
-export default TableOfContents;
diff --git a/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
similarity index 100%
rename from src/components/ThemeSwitcher/ThemeSwitcher.tsx
rename to src/components/ThemeSwitcher.tsx
diff --git a/src/components/ThemeSwitcher/index.tsx b/src/components/ThemeSwitcher/index.tsx
deleted file mode 100644
index ab35c909..00000000
--- a/src/components/ThemeSwitcher/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import ThemeSwitcher from './ThemeSwitcher';
-
-export default ThemeSwitcher;
diff --git a/src/utils/__tests__/cn.test.ts b/src/utils/__tests__/cn.test.ts
deleted file mode 100644
index c4647f00..00000000
--- a/src/utils/__tests__/cn.test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import cn from '../cn';
-
-describe('TailwindCSS className merge function', () => {
-  it('should return current className', () => {
-    // Arrange
-    const baseClassName = 'bg-blue-500 text-white/90';
-    const mergeClassName = { 'bg-red-500': true };
-    const expected = 'text-white/90 bg-red-500';
-    // Act
-    const className = cn(baseClassName, mergeClassName);
-    // Assert
-    expect(className).toBe(expected);
-  });
-});
diff --git a/src/app/[lang]/__tests__/card.test.tsx b/tests/app/[lang]/card.test.tsx
similarity index 94%
rename from src/app/[lang]/__tests__/card.test.tsx
rename to tests/app/[lang]/card.test.tsx
index b0a57475..f83a76eb 100644
--- a/src/app/[lang]/__tests__/card.test.tsx
+++ b/tests/app/[lang]/card.test.tsx
@@ -1,11 +1,10 @@
 import { render, screen } from '@testing-library/react';
 
 import { formatDate } from '@/utils/date';
-import Article from '../Article';
+import Article from '@/app/[lang]/Article';
 
 describe('Article component', () => {
   it('should render correct element', () => {
-    // Arrange
     const data: DataFrontmatter = {
       id: 'test_id',
       title: 'title test',
@@ -22,7 +21,7 @@ describe('Article component', () => {
     const article = screen.getByRole('article');
     const image = screen.getByRole('img');
     const heading = screen.getByRole('heading');
-    // Assert
+
     expect(article).toBeInTheDocument();
     expect(image).toHaveAttribute('src', data.image);
     expect(image).toHaveAttribute('alt', `${data.title} cover`);
diff --git a/src/app/[lang]/__tests__/footer.test.tsx b/tests/app/[lang]/footer.test.tsx
similarity index 86%
rename from src/app/[lang]/__tests__/footer.test.tsx
rename to tests/app/[lang]/footer.test.tsx
index f64fe575..1b44a157 100644
--- a/src/app/[lang]/__tests__/footer.test.tsx
+++ b/tests/app/[lang]/footer.test.tsx
@@ -1,13 +1,11 @@
 import { render, screen } from '@testing-library/react';
-import Footer from '../Footer';
+import Footer from '@/app/[lang]/Footer';
 
 describe('Footer component', () => {
   it('should render correct element', () => {
-    // Arrange
     const footerCopyright = 'footer copyright';
     render(<Footer copyright={footerCopyright} />);
     const footer = screen.getByRole('contentinfo');
-    // Assert
     expect(footer).toBeInTheDocument();
     expect(footer).toHaveTextContent(footerCopyright);
   });
diff --git a/src/app/[lang]/__tests__/header.test.tsx b/tests/app/[lang]/header.test.tsx
similarity index 88%
rename from src/app/[lang]/__tests__/header.test.tsx
rename to tests/app/[lang]/header.test.tsx
index f17bbe08..b67e610e 100644
--- a/src/app/[lang]/__tests__/header.test.tsx
+++ b/tests/app/[lang]/header.test.tsx
@@ -1,5 +1,5 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
-import Header, { Avatar } from '../Header';
+import Header, { Avatar } from '@/app/[lang]/Header';
 
 const scrollDownTo = (to: number) => {
   act(() => {
@@ -24,53 +24,43 @@ describe('Header component', () => {
   );
 
   it('should render correct element', () => {
-    // Arrange
     render(<Header avatar={avatar} />);
     const brandLink = screen.getByRole('img');
-    // Assert
     expect(brandLink).toBeInTheDocument();
     expect(brandLink.parentElement).toHaveAttribute('href', '/');
   });
 
   it('should hide header on scroll down and show on scroll up', async () => {
-    // Arrange
     render(<Header avatar={avatar} scrollThreshold={100} />);
     const header = screen.getByRole('banner');
     expect(header.tagName).toBe('HEADER');
 
-    // Act
     scrollDownTo(20);
-    // Assert
     await waitFor(() => {
       expect(header).toHaveStyle({ '--header-translate-y': '0px' });
     });
-    // Act
+
     scrollDownTo(99);
-    // Assert
     await waitFor(() => {
       expect(header).toHaveStyle({ '--header-translate-y': '0px' });
     });
-    // Act
+
     scrollDownTo(150);
-    // Assert
     await waitFor(() => {
       expect(header).toHaveStyle({ '--header-translate-y': '50px' });
     });
-    // Act
+
     scrollDownTo(800);
-    // Assert
     await waitFor(() => {
       expect(header).toHaveStyle({ '--header-translate-y': '50px' });
     });
-    // Act
+
     scrollUpTo(500);
-    // Assert
     await waitFor(() => {
       expect(header).toHaveStyle({ '--header-translate-y': '300px' });
     });
-    // Act
+
     scrollUpTo(0);
-    // Assert
     await waitFor(() => {
       expect(header).toHaveStyle({ '--header-translate-y': '300px' });
     });
diff --git a/src/app/[lang]/__tests__/layout.test.tsx b/tests/app/[lang]/layout.test.tsx
similarity index 86%
rename from src/app/[lang]/__tests__/layout.test.tsx
rename to tests/app/[lang]/layout.test.tsx
index e4a8c775..a74ec674 100644
--- a/src/app/[lang]/__tests__/layout.test.tsx
+++ b/tests/app/[lang]/layout.test.tsx
@@ -1,23 +1,23 @@
 import { render, screen } from '@testing-library/react';
 import { locales } from '~/i18n';
-import mockPathname from '~/tests/navigation';
-import Layout, { generateMetadata, generateStaticParams } from '../layout';
+import mockNavigation from '~/tests/navigation';
+import Layout, { generateMetadata, generateStaticParams } from '@/app/[lang]/layout';
 
 describe('I18n layout', () => {
   it('should render correct element', async () => {
-    // Arrange
     const testText = 'Test layout component';
-    mockPathname.mockReturnValueOnce('/');
+    mockNavigation.pathname.mockReturnValueOnce('/');
     const layout = await Layout({
       children: <h2>{testText}</h2>,
       params: { lang: 'en' }
     });
     render(layout);
+
     const testChildren = await screen.findByRole('heading');
     const header = await screen.findByRole('banner');
     const nav = await screen.findByRole('navigation');
     const footer = await screen.findByRole('contentinfo');
-    // Assert
+
     expect(testChildren).toHaveTextContent(testText);
     expect(header).toBeInTheDocument();
     expect(nav).toBeInTheDocument();
@@ -25,19 +25,15 @@ describe('I18n layout', () => {
   });
 
   it('should generate correct metadata', async () => {
-    // Arrange
     const metadata = await generateMetadata({
       params: { lang: 'en' },
     });
-    // Assert
     expect(metadata).toBeTruthy();
   });
 
   it('should generate correct static params', async () => {
-    // Arrange
     const staticParams = await generateStaticParams();
     const expected = locales.map(lang => ({ lang }));
-    // Assert
     expect(staticParams).toStrictEqual(expected);
   });
 });
diff --git a/src/app/[lang]/__tests__/menu.test.tsx b/tests/app/[lang]/menu.test.tsx
similarity index 86%
rename from src/app/[lang]/__tests__/menu.test.tsx
rename to tests/app/[lang]/menu.test.tsx
index cc487ebb..280a4b99 100644
--- a/src/app/[lang]/__tests__/menu.test.tsx
+++ b/tests/app/[lang]/menu.test.tsx
@@ -1,20 +1,18 @@
 import { render, screen } from '@testing-library/react';
-import mockPathname from '~/tests/navigation';
-import Menu, { MenuProps } from '../Menu';
+import mockNavigation from '~/tests/navigation';
+import Menu, { MenuProps } from '@/app/[lang]/Menu';
 
 describe('Menu component', () => {
   it('should render correct element', () => {
-    // Arrange
     const menu: MenuProps['menu'] = [
       { text: 'Home', href: '/' },
       { text: 'Post', href: '/posts' },
     ];
-    mockPathname.mockReturnValue('/');
+    mockNavigation.pathname.mockReturnValue('/');
     render(<Menu menu={menu} />);
     const nav = screen.getByRole('navigation');
     const linkA = screen.getByRole('link', { name: menu[0].text });
     const linkB = screen.getByRole('link', { name: menu[1].text });
-    // Assert
     expect(nav).toBeInTheDocument();
     expect(nav.tagName).toBe('NAV');
     expect(linkA).toHaveTextContent(menu[0].text);
@@ -32,17 +30,15 @@ describe('Menu component', () => {
   ])(
     'should render correct active link based on the pathname "%s"',
     (activeLinkText, otherLinkText, pathname) => {
-      // Arrange
       const menu: MenuProps['menu'] = [
         { text: 'Home', href: '/' },
         { text: 'Post', href: '/posts' },
       ];
-      mockPathname.mockReturnValue(pathname);
+      mockNavigation.pathname.mockReturnValue(pathname);
       render(<Menu menu={menu} />);
       const activeLink = screen.getByRole('link', { name: activeLinkText });
       const otherLink = screen.getByRole('link', { name: otherLinkText });
       const activeClassName = 'neon-text';
-      // Assert
       expect(activeLink).toHaveClass(activeClassName);
       expect(otherLink).not.toHaveClass(activeClassName);
     }
diff --git a/src/app/[lang]/__tests__/page.test.tsx b/tests/app/[lang]/page.test.tsx
similarity index 86%
rename from src/app/[lang]/__tests__/page.test.tsx
rename to tests/app/[lang]/page.test.tsx
index 2a6192e6..43361caa 100644
--- a/src/app/[lang]/__tests__/page.test.tsx
+++ b/tests/app/[lang]/page.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import en from '~/i18n/locales/en';
-import Page, { generateMetadata } from '../page';
+import Page, { generateMetadata } from '@/app/[lang]/page';
 
 jest.mock('@/utils/mdx', () => ({
   getAllDataFrontmatter: () => [],
@@ -8,20 +8,16 @@ jest.mock('@/utils/mdx', () => ({
 
 describe('Root page component', () => {
   it('should render correct element', async () => {
-    // Arrange
     const page = await Page({ params: { lang: 'en' } });
     render(page);
     const heading = await screen.findByRole('heading', { level: 1 });
-    // Assert
     expect(heading).toBeInTheDocument();
   });
 
   it('should generate correct metadata', async () => {
-    // Arrange
     const metadata = await generateMetadata({
       params: { lang: 'en' },
     });
-    // Assert
     expect(metadata).toStrictEqual({ title: en.common.home });
   });
 });
diff --git a/src/app/[lang]/posts/[postId]/__tests__/page.test.tsx b/tests/app/[lang]/posts/[postId]/page.test.tsx
similarity index 81%
rename from src/app/[lang]/posts/[postId]/__tests__/page.test.tsx
rename to tests/app/[lang]/posts/[postId]/page.test.tsx
index 57c73500..f4f75122 100644
--- a/src/app/[lang]/posts/[postId]/__tests__/page.test.tsx
+++ b/tests/app/[lang]/posts/[postId]/page.test.tsx
@@ -1,15 +1,13 @@
 import { render, screen } from '@testing-library/react';
-import Page, { generateMetadata, generateStaticParams } from '../page';
+import mockNavigation from '~/tests/navigation';
+import Page, {
+  generateMetadata,
+  generateStaticParams,
+} from '@/app/[lang]/posts/[postId]/page';
 
-const mockNotFound = jest.fn();
 const mockDataList = jest.fn();
 const mockData = jest.fn();
 
-jest.mock('next/navigation', () => ({
-  notFound: () => mockNotFound(),
-  usePathname: () => '',
-}));
-
 jest.mock('@/components/TableOfContents', () => () => null);
 
 jest.mock('@/utils/mdx', () => ({
@@ -18,14 +16,12 @@ jest.mock('@/utils/mdx', () => ({
 }));
 
 beforeEach(() => {
-  mockNotFound.mockClear();
   mockDataList.mockClear();
   mockData.mockClear();
 });
 
 describe('[postId] page', () => {
   it('should render correct page', async () => {
-    // Arrange
     const testText = 'test content';
     mockData.mockReturnValueOnce({
       id: 'test-id',
@@ -40,36 +36,28 @@ describe('[postId] page', () => {
     });
     render(page);
     const heading = await screen.findByRole('heading', { level: 1 });
-    // Assert
     expect(heading).toBeInTheDocument();
   });
 
   it('should call notFound when post data is null', async () => {
-    // Arrange
     mockData.mockReturnValue(null);
     await Page({ params: { postId: 'test-id' } });
-    // Assert
-    expect(mockNotFound).toBeCalled();
+    expect(mockNavigation.notFound).toHaveBeenCalled();
   });
 });
 
 describe('generate static params', () => {
-
   it('should generate correct static params', async () => {
-    // Arrange
     const source = [{ id: 'test-id-1' }, { id: 'test-id-2' }];
     mockDataList.mockReturnValueOnce(source);
     const staticParams = await generateStaticParams();
     const expected = source.map(({ id }) => ({ postId: id }));
-    // Assert
     expect(staticParams).toStrictEqual(expected);
   });
 });
 
 describe('generate metadata', () => {
-
   it('should generate correct metadata', async () => {
-    // Arrange
     const expected = {
       date: '2023/10/28',
       title: 'test title',
@@ -78,14 +66,11 @@ describe('generate metadata', () => {
     const metadata = await generateMetadata({
       params: { postId: 'test-id' },
     });
-    // Assert
     expect(metadata).toStrictEqual(expected);
   });
 
   it('should call notFound when post data is null', async () => {
-    // Arrange
     await generateMetadata({ params: { postId: 'test-id' } });
-    // Assert
-    expect(mockNotFound).toBeCalled();
+    expect(mockNavigation.notFound).toHaveBeenCalled();
   });
 });
diff --git a/src/app/[lang]/posts/__tests__/infiniteList.test.tsx b/tests/app/[lang]/posts/infiniteList.test.tsx
similarity index 73%
rename from src/app/[lang]/posts/__tests__/infiniteList.test.tsx
rename to tests/app/[lang]/posts/infiniteList.test.tsx
index d04b35ef..3d4b50c8 100644
--- a/src/app/[lang]/posts/__tests__/infiniteList.test.tsx
+++ b/tests/app/[lang]/posts/infiniteList.test.tsx
@@ -1,19 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import InfiniteList from '../InfiniteList';
-
-jest.mock('next/navigation', () => ({
-  useRouter() {
-    return {
-      prefetch: () => null,
-    };
-  },
-  useSearchParams() {
-    return new URLSearchParams();
-  },
-  usePathname() {
-    return '';
-  },
-}));
+import mockNavigation from '~/tests/navigation';
+import InfiniteList from '@/app/[lang]/posts/InfiniteList';
 
 describe('InfiniteList component', () => {
   it('should render correct element', () => {
@@ -26,12 +13,11 @@ describe('InfiniteList component', () => {
         categories: [],
         tags: [],
       }));
+    mockNavigation.searchParams.mockReturnValue(new URLSearchParams());
     render(<InfiniteList items={generateMockPosts(20)} />);
-
     const link = screen.getByRole('link', { name: '更多文章' });
     const list = screen.getByRole('list');
-
-    expect(list).toBeInTheDocument();
     expect(link).toBeInTheDocument();
+    expect(list).toBeInTheDocument();
   });
 });
diff --git a/src/app/[lang]/posts/__tests__/page.test.tsx b/tests/app/[lang]/posts/page.test.tsx
similarity index 70%
rename from src/app/[lang]/posts/__tests__/page.test.tsx
rename to tests/app/[lang]/posts/page.test.tsx
index a1b3e584..ed562fd7 100644
--- a/src/app/[lang]/posts/__tests__/page.test.tsx
+++ b/tests/app/[lang]/posts/page.test.tsx
@@ -1,38 +1,28 @@
 import { render, screen } from '@testing-library/react';
 import en from '~/i18n/locales/en';
-import Page, { generateMetadata } from '../page';
+import mockNavigation from '~/tests/navigation';
+import Page, { generateMetadata } from '@/app/[lang]/posts/page';
 
 jest.mock('@/utils/mdx', () => ({
   getAllDataFrontmatter: () => [],
 }));
 
-jest.mock('next/navigation', () => ({
-  useRouter() {
-    return {
-      prefetch: () => null,
-    };
-  },
-  useSearchParams() {
-    return new URLSearchParams();
-  },
-}));
-
 describe('Posts page', () => {
+  beforeEach(() => {
+    mockNavigation.searchParams.mockReturnValue(new URLSearchParams());
+  });
+
   it('should render correct element', async () => {
-    // Arrange
     const page = await Page({ params: { lang: 'en' } });
     render(page);
     const heading = await screen.findByRole('heading', { level: 1 });
-    // Assert
     expect(heading).toBeInTheDocument();
   });
 
   it('should generate correct metadata', async () => {
-    // Arrange
     const metadata = await generateMetadata({
       params: { lang: 'en' },
     });
-    // Assert
     expect(metadata).toStrictEqual({ title: en.common.posts });
   });
 });
diff --git a/src/components/CodeBox/codeBox.test.tsx b/tests/components/codeBox.test.tsx
similarity index 91%
rename from src/components/CodeBox/codeBox.test.tsx
rename to tests/components/codeBox.test.tsx
index 048ffa21..5b1e5da3 100644
--- a/src/components/CodeBox/codeBox.test.tsx
+++ b/tests/components/codeBox.test.tsx
@@ -1,7 +1,7 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import CodeBox from '.';
+import CodeBox from '@/components/CodeBox';
 
 const mockCopy = jest.fn();
 
@@ -11,12 +11,10 @@ jest.mock('@/utils/clipboard', () => ({
 
 describe('CodeBox component', () => {
   it('should render correct element', () => {
-    // Arrange
     const code = 'should render correct element';
     render(<CodeBox>{code}</CodeBox>);
     const copyButton = screen.getByRole('button');
     const codeBox = screen.getByText(code);
-    // Assert
     expect(copyButton).toBeInTheDocument();
     expect(codeBox).toBeInTheDocument();
     expect(codeBox).toHaveTextContent(code);
@@ -24,18 +22,16 @@ describe('CodeBox component', () => {
   });
 
   it('should correctly copy the text when clicked', async () => {
-    // Arrange
     const code = 'should correctly copy the text when clicked';
     render(<CodeBox>{code}</CodeBox>);
     const copyButton = screen.getByRole('button');
     const user = userEvent.setup();
     expect(screen.queryByText('複製成功！')).toHaveClass('opacity-0');
-    // Act
+
     await act(() => user.click(copyButton));
     await act(() => user.click(copyButton));
-    // Assert
     expect(screen.queryByText('複製成功！')).not.toHaveClass('opacity-0');
-    expect(mockCopy).toBeCalledTimes(2);
+    expect(mockCopy).toHaveBeenCalledTimes(2);
     expect(mockCopy).toHaveBeenCalledWith(code);
     await waitFor(
       () => {
diff --git a/src/components/Collapse/collapse.test.tsx b/tests/components/collapse.test.tsx
similarity index 91%
rename from src/components/Collapse/collapse.test.tsx
rename to tests/components/collapse.test.tsx
index fef0929c..e660bcf5 100644
--- a/src/components/Collapse/collapse.test.tsx
+++ b/tests/components/collapse.test.tsx
@@ -1,13 +1,10 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { Globals } from '@react-spring/web';
-
-import Collapse from '.';
+import Collapse from '@/components/Collapse';
 
 describe('Collapse component', () => {
   beforeAll(() => {
-    Globals.assign({
-      skipAnimation: true,
-    });
+    Globals.assign({ skipAnimation: true });
   });
 
   it('should render correct element', async () => {
diff --git a/src/components/Comment/comment.test.tsx b/tests/components/comment.test.tsx
similarity index 69%
rename from src/components/Comment/comment.test.tsx
rename to tests/components/comment.test.tsx
index a586c67c..be8fb1f7 100644
--- a/src/components/Comment/comment.test.tsx
+++ b/tests/components/comment.test.tsx
@@ -1,29 +1,32 @@
 import { render, screen } from '@testing-library/react';
 import { GiscusProps } from '@giscus/react';
 import giscusConfigs from '~/data/giscus';
-
-import Comment from '.';
+import Comment from '@/components/Comment';
 
 const getGiscusProps = jest.fn();
 const mockUseTheme = jest.fn();
 
-jest.mock('@giscus/react', () => function MockGiscus(props: GiscusProps) {
-  getGiscusProps(props);
-  return <div data-testid="comment"></div>;
-});
+jest.mock(
+  '@giscus/react',
+  () =>
+    function MockGiscus(props: GiscusProps) {
+      getGiscusProps(props);
+      return <div data-testid="comment"></div>;
+    }
+);
 jest.mock('next-themes', () => ({
   useTheme: () => mockUseTheme(),
 }));
 
 describe('Comment component', () => {
   it.each(['light', 'dark'])('should render correct element', async (theme) => {
-    // Arrange
     mockUseTheme.mockReturnValue({ resolvedTheme: theme });
     render(<Comment />);
     const comment = screen.getByTestId('comment');
-    const expectedProps: GiscusProps = JSON.parse(JSON.stringify(giscusConfigs));
+    const expectedProps: GiscusProps = JSON.parse(
+      JSON.stringify(giscusConfigs)
+    );
     expectedProps.theme = `noborder_${theme}`;
-    // Assert
     expect(comment).toBeInTheDocument();
     expect(getGiscusProps).toHaveBeenCalledWith(expectedProps);
   });
diff --git a/src/components/Container/container.test.tsx b/tests/components/container.test.tsx
similarity index 88%
rename from src/components/Container/container.test.tsx
rename to tests/components/container.test.tsx
index 99c05f43..ce553cd0 100644
--- a/src/components/Container/container.test.tsx
+++ b/tests/components/container.test.tsx
@@ -1,16 +1,13 @@
 import { render, screen } from '@testing-library/react';
-
-import Container from '.';
+import Container from '@/components/Container';
 
 describe('Container component', () => {
   it.each([
     [undefined, 'DIV'],
     ['main', 'MAIN'],
   ] as const)('should render correct element', async (as, expectedTagName) => {
-    // Arrange
     render(<Container as={as} data-testid="container" />);
     const container = screen.getByTestId('container');
-    // Assert
     expect(container).toBeInTheDocument();
     expect(container.tagName).toBe(expectedTagName);
   });
diff --git a/src/components/Heading/heading.test.tsx b/tests/components/heading.test.tsx
similarity index 87%
rename from src/components/Heading/heading.test.tsx
rename to tests/components/heading.test.tsx
index 76f3150f..74265a6f 100644
--- a/src/components/Heading/heading.test.tsx
+++ b/tests/components/heading.test.tsx
@@ -1,14 +1,11 @@
 import { render, screen } from '@testing-library/react';
-
-import Heading, { H1, H2, H3, H4, H5, H6 } from '.';
+import Heading, { H1, H2, H3, H4, H5, H6 } from '@/components/Heading';
 
 describe('Heading component', () => {
   it('should render correct element', () => {
-    // Arrange
     const name = 'The heading text';
     render(<Heading as="h2">{name}</Heading>);
     const heading = screen.getByRole('heading');
-    // Assert
     expect(heading).toBeInTheDocument();
     expect(heading).toHaveTextContent(name);
     expect(heading.tagName).toBe('H2');
@@ -22,11 +19,9 @@ describe('Heading component', () => {
     [H5, 'H5'],
     [H6, 'H6'],
   ])('should render correct tag name', (Component, expected) => {
-    // Arrange
     const name = `The ${expected} tag`;
     render(<Component>{name}</Component>);
     const heading = screen.getByRole('heading');
-    // Assert
     expect(heading).toHaveTextContent(name);
     expect(heading.tagName).toBe(expected);
   });
diff --git a/src/components/Image/image.test.tsx b/tests/components/image.test.tsx
similarity index 94%
rename from src/components/Image/image.test.tsx
rename to tests/components/image.test.tsx
index a6b356c2..b38a6616 100644
--- a/src/components/Image/image.test.tsx
+++ b/tests/components/image.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
-
-import Image from '.';
+import Image from '@/components/Image';
 
 describe('Image component', () => {
   it.each([
@@ -23,10 +22,8 @@ describe('Image component', () => {
         'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP87wMAAlABTQluYBcAAAAASUVORK5CYII=',
     },
   ])('should render correct element', ({ alt, parentTagName, ...props }) => {
-    // Arrange
     render(<Image src="https://external.com/test.jpg" alt={alt} {...props} />);
     const image = screen.getByAltText(alt);
-    // Assert
     expect(image.tagName).toBe('IMG');
     expect(image.parentElement?.tagName).toBe(parentTagName);
   });
diff --git a/src/components/Link/link.test.tsx b/tests/components/link.test.tsx
similarity index 86%
rename from src/components/Link/link.test.tsx
rename to tests/components/link.test.tsx
index 19787270..4142dcef 100644
--- a/src/components/Link/link.test.tsx
+++ b/tests/components/link.test.tsx
@@ -1,20 +1,18 @@
 import type { Route } from 'next';
 import { render, screen } from '@testing-library/react';
-
-import mockPathname from '~/tests/navigation';
-import Link from '.';
+import mockNavigation from '~/tests/navigation';
+import Link from '@/components/Link';
 
 describe('Link component', () => {
   it.each([
+    ['?q=test', 'The query link text', '?q=test'],
     ['#anchor', 'The anchor link text', '#anchor'],
     ['/internal', 'The internal link text', '/internal'],
     ['https://external.com', 'The external link text', 'https://external.com'],
     [{ pathname: '/internal' }, 'The object href text', '/internal'],
   ])('should render correct element', (href, name, expectedHref) => {
-    // Arrange
     render(<Link href={href as Route}>{name}</Link>);
     const link = screen.getByRole('link', { name });
-    // Assert
     expect(link).toBeInTheDocument();
     expect(link).toHaveTextContent(name);
     expect(link).toHaveAttribute('href', expectedHref);
@@ -29,13 +27,11 @@ describe('Link component', () => {
   ])(
     'should render correct link element with pathname %s',
     (pathname, expected) => {
-      // Arrange
       const name = 'internal link';
       const href = '/internal';
-      mockPathname.mockReturnValueOnce(pathname);
+      mockNavigation.pathname.mockReturnValueOnce(pathname);
       render(<Link href={href}>{name}</Link>);
       const link = screen.getByRole('link', { name });
-      // Assert
       expect(link).toHaveAttribute('href', expected);
     }
   );
diff --git a/src/components/List/list.test.tsx b/tests/components/list.test.tsx
similarity index 91%
rename from src/components/List/list.test.tsx
rename to tests/components/list.test.tsx
index 21cf6a2e..f69a6ecc 100644
--- a/src/components/List/list.test.tsx
+++ b/tests/components/list.test.tsx
@@ -1,16 +1,14 @@
 import { render, screen } from '@testing-library/react';
-import List from '.';
+import List from '@/components/List';
 
 describe('List component', () => {
   it('should render correct element', () => {
-    // Arrange
     const items = [
       { id: 'id_1', text: 'text_1' },
       { id: 'id_2', text: 'text_2' },
     ];
     render(<List Item={(data) => data.text} items={items} />);
     const list = screen.getByRole('list');
-    // Assert
     expect(list).toBeInTheDocument();
     expect(list.childNodes.length).toBe(items.length);
     expect(list).toHaveTextContent(items[0].text);
diff --git a/src/components/TableOfContents/tableOfContents.test.tsx b/tests/components/tableOfContents.test.tsx
similarity index 97%
rename from src/components/TableOfContents/tableOfContents.test.tsx
rename to tests/components/tableOfContents.test.tsx
index fedb8adc..c3eb69f4 100644
--- a/src/components/TableOfContents/tableOfContents.test.tsx
+++ b/tests/components/tableOfContents.test.tsx
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
-
-import { H2, H3 } from '../Heading';
-import TableOfContents from '.';
+import { H2, H3 } from '@/components/Heading';
+import TableOfContents from '@/components/TableOfContents';
 
 describe('TableOfContents component', () => {
   const mockIntersectionObserver = jest.fn();
diff --git a/src/components/ThemeSwitcher/themeSwitcher.test.tsx b/tests/components/themeSwitcher.test.tsx
similarity index 87%
rename from src/components/ThemeSwitcher/themeSwitcher.test.tsx
rename to tests/components/themeSwitcher.test.tsx
index bb7f7950..717c80e1 100644
--- a/src/components/ThemeSwitcher/themeSwitcher.test.tsx
+++ b/tests/components/themeSwitcher.test.tsx
@@ -3,8 +3,7 @@ import { ThemeProvider } from 'next-themes';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { setDeviceTheme } from '~/tests/theme';
-
-import ThemeSwitcher from '.';
+import ThemeSwitcher from '@/components/ThemeSwitcher';
 
 function TestThemeComponent({ children }: PropsWithChildren) {
   return (
@@ -17,29 +16,24 @@ function TestThemeComponent({ children }: PropsWithChildren) {
 
 describe('ThemeSwitch component', () => {
   it('should render correct element', async () => {
-    // Arrange
     setDeviceTheme('light');
     render(<TestThemeComponent />);
     const button = screen.getByRole('button');
-    // Assert
     expect(button).toBeInTheDocument();
   });
 
   it('should correctly switch the theme when clicked', async () => {
-    // Arrange
     setDeviceTheme('dark');
     render(<TestThemeComponent />);
     const button = screen.getByRole('button');
     const user = userEvent.setup();
-    // Act
-    await act(() => user.click(button))
-    // Assert
+
+    await act(() => user.click(button));
     expect(document.documentElement.getAttribute('style')).toBe(
       'color-scheme: light;'
     );
-    // Act
+
     await act(() => user.click(button));
-    // Assert
     expect(document.documentElement.getAttribute('style')).toBe(
       'color-scheme: dark;'
     );
diff --git a/src/hooks/__tests__/useAutoReset.test.ts b/tests/hooks/useAutoReset.test.ts
similarity index 85%
rename from src/hooks/__tests__/useAutoReset.test.ts
rename to tests/hooks/useAutoReset.test.ts
index 421b4884..40650a2b 100644
--- a/src/hooks/__tests__/useAutoReset.test.ts
+++ b/tests/hooks/useAutoReset.test.ts
@@ -1,21 +1,22 @@
 import { act, renderHook } from '@testing-library/react';
-import useAutoReset from '../useAutoReset';
+import useAutoReset from '@/hooks/useAutoReset';
 
 describe('useAutoReset hook', () => {
   it('should reset state to initial value after a specified delay', async () => {
-    // Arrange
     const initialValue = false;
     const newValue = true;
     const { result } = renderHook(() => useAutoReset(initialValue));
+
     jest.useFakeTimers();
-    // Assert
+
     expect(result.current[0]).toBe(initialValue);
-    // Act
+
     act(() => result.current[1](newValue));
-    // Assert
     expect(result.current[0]).toBe(newValue);
+
     act(() => jest.runAllTimers());
     expect(result.current[0]).toBe(initialValue);
+
     jest.useRealTimers();
   });
 });
diff --git a/src/hooks/__tests__/useI18n.test.ts b/tests/hooks/useI18n.test.ts
similarity index 64%
rename from src/hooks/__tests__/useI18n.test.ts
rename to tests/hooks/useI18n.test.ts
index 2cc02924..4e29e905 100644
--- a/src/hooks/__tests__/useI18n.test.ts
+++ b/tests/hooks/useI18n.test.ts
@@ -1,20 +1,19 @@
 import { renderHook } from '@testing-library/react';
-import mockPathname from '~/tests/navigation';
-import useI18n from '../useI18n';
+import { defaultLocale } from '~/i18n';
+import mockNavigation from '~/tests/navigation';
+import useI18n from '@/hooks/useI18n';
 
 describe('useI18n hook', () => {
   it.each([
-    ['/test/path', 'zh'],
+    ['/test/path', defaultLocale],
     ['/en/test/path', 'en'],
     ['/zh/test/path', 'zh'],
     ['/fr/test/path', 'zh'],
   ])(
     'should return the correct language code and dictionary',
     (pathname, expected) => {
-      // Arrange
-      mockPathname.mockReturnValueOnce(pathname);
+      mockNavigation.pathname.mockReturnValueOnce(pathname);
       const { result } = renderHook(() => useI18n());
-      // Assert
       expect(result.current.lang).toBe(expected);
     }
   );
diff --git a/src/hooks/__tests__/useIntersectionObserver.test.ts b/tests/hooks/useIntersectionObserver.test.ts
similarity index 68%
rename from src/hooks/__tests__/useIntersectionObserver.test.ts
rename to tests/hooks/useIntersectionObserver.test.ts
index 5ebcf5da..9005128c 100644
--- a/src/hooks/__tests__/useIntersectionObserver.test.ts
+++ b/tests/hooks/useIntersectionObserver.test.ts
@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import useIntersectionObserver from '../useIntersectionObserver';
+import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 
 describe('useIntersectionObserver hook', () => {
   const mockIntersectionObserver = jest.fn();
@@ -21,7 +21,6 @@ describe('useIntersectionObserver hook', () => {
   });
 
   it('should observe elements when elementRef is provided', () => {
-    // Arrange
     const elementRef = {
       current: [
         document.createElement('h2'),
@@ -29,15 +28,13 @@ describe('useIntersectionObserver hook', () => {
       ]
     }
     renderHook(() => useIntersectionObserver({ elementRef }));
-    // Assert
-    expect(mockIntersectionObserver).toBeCalledTimes(1);
-    expect(mockObserve).toBeCalledTimes(2);
-    expect(mockObserve).toBeCalledWith(elementRef.current[0]);
+    expect(mockIntersectionObserver).toHaveBeenCalledTimes(1);
+    expect(mockObserve).toHaveBeenCalledTimes(2);
+    expect(mockObserve).toHaveBeenCalledWith(elementRef.current[0]);
     expect(mockObserve).toHaveBeenLastCalledWith(elementRef.current[1]);
   });
 
   it('should observe and disconnect elements when setElementRef is called', () => {
-    // Arrange
     const elementRef = {
       current: [
         document.createElement('h2'),
@@ -45,21 +42,18 @@ describe('useIntersectionObserver hook', () => {
       ]
     }
     const { result } = renderHook(() => useIntersectionObserver());
-    // Assert
-    expect(mockIntersectionObserver).toBeCalledTimes(1);
-    expect(mockObserve).toBeCalledTimes(0);
-    // Act
+    expect(mockIntersectionObserver).toHaveBeenCalledTimes(1);
+    expect(mockObserve).toHaveBeenCalledTimes(0);
+
     act(() => result.current[1](elementRef.current));
-    // Assert
-    expect(mockDisconnect).toBeCalledTimes(0);
-    expect(mockObserve).toBeCalledTimes(2);
-    expect(mockObserve).toBeCalledWith(elementRef.current[0]);
+    expect(mockDisconnect).toHaveBeenCalledTimes(0);
+    expect(mockObserve).toHaveBeenCalledTimes(2);
+    expect(mockObserve).toHaveBeenCalledWith(elementRef.current[0]);
     expect(mockObserve).toHaveBeenLastCalledWith(elementRef.current[1]);
-    // Act
+
     act(() => result.current[1](elementRef.current[0]));
-    // Assert
-    expect(mockDisconnect).toBeCalledTimes(1);
-    expect(mockObserve).toBeCalledTimes(3);
+    expect(mockDisconnect).toHaveBeenCalledTimes(1);
+    expect(mockObserve).toHaveBeenCalledTimes(3);
     expect(mockObserve).toHaveBeenLastCalledWith(elementRef.current[0]);
   });
 });
diff --git a/src/hooks/__tests__/useMounted.test.ts b/tests/hooks/useMounted.test.ts
similarity index 78%
rename from src/hooks/__tests__/useMounted.test.ts
rename to tests/hooks/useMounted.test.ts
index 82743822..e4a326a5 100644
--- a/src/hooks/__tests__/useMounted.test.ts
+++ b/tests/hooks/useMounted.test.ts
@@ -1,11 +1,9 @@
 import { renderHook } from '@testing-library/react';
-import useIsMounted from '../useIsMounted';
+import useIsMounted from '@/hooks/useIsMounted';
 
 describe('useIsMounted hook', () => {
   it('should return true if component is mounted', () => {
-    // Arrange
     const { result } = renderHook(() => useIsMounted());
-    // Assert
     expect(result.current).toBeTruthy();
   });
 });
diff --git a/src/hooks/__tests__/useScroll.test.ts b/tests/hooks/useScroll.test.ts
similarity index 54%
rename from src/hooks/__tests__/useScroll.test.ts
rename to tests/hooks/useScroll.test.ts
index ff81679d..bee2a574 100644
--- a/src/hooks/__tests__/useScroll.test.ts
+++ b/tests/hooks/useScroll.test.ts
@@ -1,152 +1,117 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
-import useScroll from '../useScroll';
+import useScroll from '@/hooks/useScroll';
 
 describe('useScroll hook', () => {
-  const scrollHandler = jest.fn();
+  const handler = jest.fn();
 
   beforeEach(() => {
     window.scrollX = 0;
     window.scrollY = 0;
-    scrollHandler.mockClear();
+    handler.mockClear();
   });
 
   it('should not call the scroll handler initially', () => {
-    // Arrange
-    renderHook(() => useScroll({ handler: scrollHandler }));
-    // Assert
-    expect(scrollHandler).not.toBeCalled();
+    renderHook(() => useScroll({ handler }));
+    expect(handler).not.toHaveBeenCalled();
   });
 
   it('should call the scroll handler when window is scrolled', async () => {
-    // Arrange
-    renderHook(() => useScroll({ handler: scrollHandler }));
-    // Act
+    renderHook(() => useScroll({ handler }));
     act(() => {
       window.scrollX = 100;
       window.scrollY = 200;
       window.dispatchEvent(new Event('scroll'));
     });
-    // Assert
     await waitFor(() => {
-      expect(scrollHandler).toBeCalled();
-      expect(scrollHandler).toBeCalledTimes(1);
-      expect(scrollHandler).toBeCalledWith({ x: 100, y: 200 }, window);
+      expect(handler).toHaveBeenCalled();
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith({ x: 100, y: 200 }, window);
     });
   });
 
   it('should call the scroll handler when a specified element is scrolled', async () => {
-    // Arrange
     const element = document.createElement('div');
     renderHook(() =>
       useScroll({
         ref: { current: element },
-        handler: scrollHandler,
+        handler,
       })
     );
-    // Act
     act(() => {
       element.scrollLeft = 150;
       element.scrollTop = 250;
       element.dispatchEvent(new Event('scroll'));
     });
-    // Assert
     await waitFor(() => {
-      expect(scrollHandler).toBeCalled();
-      expect(scrollHandler).toBeCalledTimes(1);
-      expect(scrollHandler).toBeCalledWith({ x: 150, y: 250 }, element);
+      expect(handler).toHaveBeenCalled();
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith({ x: 150, y: 250 }, element);
     });
   });
 
   it('should switch the element being listened to for scrolling when using register', async () => {
-    // Arrange
     const element = document.createElement('main');
-    const { result } = renderHook(() =>
-      useScroll({
-        handler: scrollHandler,
-      })
-    );
-    // Act
+    const { result } = renderHook(() => useScroll({ handler }));
     act(() => {
       window.scrollX = 0;
       window.scrollY = 80;
       window.dispatchEvent(new Event('scroll'));
     });
-    // Assert
     await waitFor(() => {
-      expect(scrollHandler).toBeCalled();
-      expect(scrollHandler).toBeCalledTimes(1);
-      expect(scrollHandler).toHaveBeenLastCalledWith({ x: 0, y: 80 }, window);
+      expect(handler).toHaveBeenCalled();
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenLastCalledWith({ x: 0, y: 80 }, window);
     });
-    // Act
+
     act(() => {
       result.current.register(element);
       element.scrollLeft = 180;
       element.scrollTop = 280;
       element.dispatchEvent(new Event('scroll'));
     });
-    // Assert
     await waitFor(() => {
-      expect(scrollHandler).toBeCalledTimes(2);
-      expect(scrollHandler).toHaveBeenLastCalledWith(
-        { x: 180, y: 280 },
-        element
-      );
+      expect(handler).toHaveBeenCalledTimes(2);
+      expect(handler).toHaveBeenLastCalledWith({ x: 180, y: 280 }, element);
     });
   });
 
   it('should stop listening to scroll events when remove is called', async () => {
-    // Arrange
-    const { result } = renderHook(() =>
-      useScroll({
-        handler: scrollHandler,
-      })
-    );
-    // Act
+    const { result } = renderHook(() => useScroll({ handler }));
     act(() => {
       result.current.remove();
       window.scrollX = 100;
       window.scrollY = 0;
       window.dispatchEvent(new Event('scroll'));
     });
-    // Assert
     await waitFor(() => {
-      expect(scrollHandler).not.toBeCalled();
+      expect(handler).not.toBeCalled();
     });
   });
 
   it('should stop listening to scroll events when the component is unmounted', async () => {
-    // Arrange
-    const { unmount } = renderHook(() =>
-      useScroll({
-        handler: scrollHandler,
-      })
-    );
-    // Act
+    const { unmount } = renderHook(() => useScroll({ handler }));
     unmount();
     act(() => {
       window.scrollX = 100;
       window.scrollY = 0;
       window.dispatchEvent(new Event('scroll'));
     });
-    // Assert
     await waitFor(() => {
-      expect(scrollHandler).not.toBeCalled();
+      expect(handler).not.toHaveBeenCalled();
     });
   });
 
   it('should trigger the scroll handler on initial render', async () => {
-    // Arrange
     renderHook(() =>
       useScroll({
-        handler: scrollHandler,
+        handler,
         initial: true,
       })
     );
-    // Assert
     await waitFor(() => {
-      expect(scrollHandler).toBeCalled();
-      expect(scrollHandler).toBeCalledTimes(1);
-      expect(scrollHandler).toBeCalledWith({ x: 0, y: 0 }, window);
+      expect(handler).toHaveBeenCalled();
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith({ x: 0, y: 0 }, window);
     });
   });
 });
diff --git a/tests/navigation.ts b/tests/navigation.ts
index 8f72eb22..5619e4c9 100644
--- a/tests/navigation.ts
+++ b/tests/navigation.ts
@@ -1,11 +1,27 @@
 const mockPathname = jest.fn();
+const mockRouter = jest.fn();
+const mockSearchParams = jest.fn();
+const mockNotFound = jest.fn();
 
 jest.mock('next/navigation', () => ({
+  notFound: () => mockNotFound(),
+  useSearchParams: () => mockSearchParams(),
   usePathname: () => mockPathname(),
+  useRouter: () => mockRouter(),
 }));
 
 beforeEach(() => {
+  mockNotFound.mockClear();
+  mockSearchParams.mockClear();
   mockPathname.mockClear();
+  mockRouter.mockClear();
 });
 
-export default mockPathname;
+const mockNavigation = {
+  notFound: mockNotFound,
+  searchParams: mockSearchParams,
+  pathname: mockPathname,
+  router: mockRouter,
+};
+
+export default mockNavigation;
diff --git a/src/plugins/__tests__/rehypeImageMetadata.test.ts b/tests/plugins/rehypeImageMetadata.test.ts
similarity index 94%
rename from src/plugins/__tests__/rehypeImageMetadata.test.ts
rename to tests/plugins/rehypeImageMetadata.test.ts
index 84f2de97..05fca159 100644
--- a/src/plugins/__tests__/rehypeImageMetadata.test.ts
+++ b/tests/plugins/rehypeImageMetadata.test.ts
@@ -1,7 +1,7 @@
 import rehypeImageMetadata, {
   ElementNode,
   ImageNode,
-} from '../rehypeImageMetadata';
+} from '@/plugins/rehypeImageMetadata';
 
 const mockSharpMetadata = jest.fn();
 const mockSharpBase64 = jest.fn();
@@ -32,7 +32,6 @@ describe('Rehype image metadata function', () => {
   });
 
   it('should format paragraph with image element to a div', async () => {
-    // Arrange
     const testImageNode: ImageNode = {
       type: 'element',
       tagName: 'img',
@@ -45,17 +44,14 @@ describe('Rehype image metadata function', () => {
       tagName: 'p',
       children: [testImageNode],
     };
-    // Act
     const transformer = rehypeImageMetadata();
     const result = await transformer(testTree);
-    // Assert
     expect(result.tagName).toBe('div');
   });
 
   it.each(['/test.jpeg', '/public/test.jpeg'])(
     'should set image properties for src: %s',
     async (src) => {
-      // Arrange
       const width = 2;
       const height = 1;
       const fileType = 'png';
@@ -70,10 +66,8 @@ describe('Rehype image metadata function', () => {
         info: { format: fileType },
         data: base64,
       });
-      // Act
       const transformer = rehypeImageMetadata();
       const result = await transformer(testImageNode);
-      // Assert
       expect(result).toStrictEqual({
         type: 'element',
         tagName: testImageNode.tagName,
diff --git a/src/utils/__tests__/clipboard.test.ts b/tests/utils/clipboard.test.ts
similarity index 85%
rename from src/utils/__tests__/clipboard.test.ts
rename to tests/utils/clipboard.test.ts
index ac493e89..130e09be 100644
--- a/src/utils/__tests__/clipboard.test.ts
+++ b/tests/utils/clipboard.test.ts
@@ -1,4 +1,4 @@
-import { copyToClipboard } from '../clipboard';
+import { copyToClipboard } from "@/utils/clipboard";
 
 function setDeviceClipboard(version?: 'new' | 'old') {
   switch (version) {
@@ -26,30 +26,21 @@ describe('Copy to clipboard function', () => {
   });
 
   it('should return error with reject', async () => {
-    // Arrange
     expect.assertions(1);
     const expected = TypeError('document.execCommand is not a function');
-    // Act
     const result = copyToClipboard('test');
-    // Assert
     await expect(result).rejects.toStrictEqual(expected);
   });
 
   it('should call document execCommand', () => {
-    // Arrange
     setDeviceClipboard('old');
-    // Act
     copyToClipboard('test');
-    // Assert
-    expect(document.execCommand).toBeCalled();
+    expect(document.execCommand).toHaveBeenCalled();
   });
 
   it('should call navigator clipboard writeText', () => {
-    // Arrange
     setDeviceClipboard('new');
-    // Act
     copyToClipboard('test');
-    // Assert
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith('test');
   });
 });
diff --git a/tests/utils/cn.test.ts b/tests/utils/cn.test.ts
new file mode 100644
index 00000000..e651479a
--- /dev/null
+++ b/tests/utils/cn.test.ts
@@ -0,0 +1,11 @@
+import cn from "@/utils/cn";
+
+describe('TailwindCSS className merge (cn) function', () => {
+  it('should return current className', () => {
+    const baseClassName = 'bg-blue-500 text-white/90';
+    const mergeClassName = { 'bg-red-500': true };
+    const expected = 'text-white/90 bg-red-500';
+    const result = cn(baseClassName, mergeClassName);
+    expect(result).toBe(expected);
+  });
+});
diff --git a/src/utils/__tests__/date.test.ts b/tests/utils/date.test.ts
similarity index 80%
rename from src/utils/__tests__/date.test.ts
rename to tests/utils/date.test.ts
index 3d5b4497..47f18489 100644
--- a/src/utils/__tests__/date.test.ts
+++ b/tests/utils/date.test.ts
@@ -1,30 +1,23 @@
-import { compareDates, formatDate } from '../date';
+import { compareDates, formatDate } from '@/utils/date';
 
 describe('Format date function', () => {
   it('should display the date format in Taiwan', () => {
-    // Arrange
     const date = new Date('2023/7/8');
     const expected = '2023年7月8日';
-    // Act
     const result = formatDate(date);
-    // Assert
     expect(result).toBe(expected);
   });
 
   it('should display the date format in American', () => {
-    // Arrange
     const date = '2023/7/8';
     const expected = 'July 8, 2023';
-    // Act
     const result = formatDate(date, 'en-us');
-    // Assert
     expect(result).toBe(expected);
   });
 });
 
 describe('Compare dates function', () => {
   it('should sort dates in descending order', () => {
-    // Arrange
     const dates: DateOrDateString[] = [
       '2023/2/2',
       '2023/11/1',
@@ -39,13 +32,11 @@ describe('Compare dates function', () => {
       '2023/2/1',
       '2023/1/1',
     ];
-    // Act
     const result = dates.sort(compareDates);
-    // Assert
     expect(result).toStrictEqual(expected);
   });
+
   it('should sort dates in ascending order', () => {
-    // Arrange
     const dates: DateOrDateString[] = [
       '2023/2/2',
       '2023/11/1',
@@ -60,11 +51,7 @@ describe('Compare dates function', () => {
       '2023/10/1',
       '2023/11/1',
     ];
-    // Act
-    const result = dates.sort((date1, date2) =>
-      compareDates(date1, date2, true)
-    );
-    // Assert
+    const result = dates.sort((...dates) => compareDates(...dates, true));
     expect(result).toStrictEqual(expected);
   });
 });
diff --git a/src/utils/__tests__/generateRSS.test.ts b/tests/utils/generateRSS.test.ts
similarity index 84%
rename from src/utils/__tests__/generateRSS.test.ts
rename to tests/utils/generateRSS.test.ts
index 17eb2063..48304a99 100644
--- a/src/utils/__tests__/generateRSS.test.ts
+++ b/tests/utils/generateRSS.test.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import type { FeedOptions } from 'feed';
 import { defaultLocale } from '~/i18n';
-import generateRSS, { PUBLIC_FEED_PATH } from '../generateRSS';
+import generateRSS, { PUBLIC_FEED_PATH } from '@/utils/generateRSS';
 
 const mockWriteFile = jest.fn();
 const mockAtom1 = (options: unknown) => `atom1 - ${JSON.stringify(options)}`;
@@ -28,7 +28,6 @@ describe('Generate RSS function', () => {
   });
 
   it('should generate the rss for the specified language', () => {
-    // Arrange
     const testFeedOptions: FeedOptions = {
       id: 'http://test.generate.rss',
       title: 'test generate RSS',
@@ -37,18 +36,15 @@ describe('Generate RSS function', () => {
     };
     const expectedFileName = 'atom.en.xml';
     const expectedFileContent = mockAtom1(testFeedOptions);
-    // Act
     generateRSS(testFeedOptions);
-    // Assert
-    expect(mockWriteFile).toBeCalledTimes(1);
-    expect(mockWriteFile).toBeCalledWith(
+    expect(mockWriteFile).toHaveBeenCalledTimes(1);
+    expect(mockWriteFile).toHaveBeenCalledWith(
       path.join(PUBLIC_FEED_PATH, expectedFileName),
       expectedFileContent
     );
   });
 
   it('should generate the rss for the default language', () => {
-    // Arrange
     const testFeedOptions: FeedOptions = {
       id: 'http://test.generate.rss',
       title: 'test generate RSS',
@@ -56,11 +52,9 @@ describe('Generate RSS function', () => {
     };
     const expectedFileName = `atom.${defaultLocale}.xml`;
     const expectedFileContent = mockAtom1(testFeedOptions);
-    // Act
     generateRSS(testFeedOptions);
-    // Assert
-    expect(mockWriteFile).toBeCalledTimes(1);
-    expect(mockWriteFile).toBeCalledWith(
+    expect(mockWriteFile).toHaveBeenCalledTimes(1);
+    expect(mockWriteFile).toHaveBeenCalledWith(
       path.join(PUBLIC_FEED_PATH, expectedFileName),
       expectedFileContent
     );
diff --git a/src/utils/__tests__/getLocale.test.ts b/tests/utils/getLocale.test.ts
similarity index 89%
rename from src/utils/__tests__/getLocale.test.ts
rename to tests/utils/getLocale.test.ts
index 43ff71aa..189cba72 100644
--- a/src/utils/__tests__/getLocale.test.ts
+++ b/tests/utils/getLocale.test.ts
@@ -1,13 +1,11 @@
 import { defaultLocale } from '~/i18n';
-import getLocale from '../getLocale';
+import getLocale from '@/utils/getLocale';
 
 describe('get locale function', () => {
   it.each([undefined, '/not/match/locale'])(
     'should return undefined when acceptLanguage does not match and defaultLocale is not provided',
     (param) => {
-      // Act
       const result = getLocale(param);
-      // Assert
       expect(result).toBe(undefined);
     }
   );
@@ -19,9 +17,7 @@ describe('get locale function', () => {
   ])(
     'should extract the preferred language code from the Accept-Language header',
     (acceptLanguage, expected) => {
-      // Act
       const result = getLocale(acceptLanguage, defaultLocale);
-      // Assert
       expect(result).toBe(expected);
     }
   );
@@ -34,9 +30,7 @@ describe('get locale function', () => {
   ])(
     'should extract the language code from the path string',
     (pathname, expected) => {
-      // Act
       const result = getLocale(pathname, defaultLocale);
-      // Assert
       expect(result).toBe(expected);
     }
   );
diff --git a/src/utils/__tests__/math.test.ts b/tests/utils/math.test.ts
similarity index 74%
rename from src/utils/__tests__/math.test.ts
rename to tests/utils/math.test.ts
index fd292e30..04c1cbcd 100644
--- a/src/utils/__tests__/math.test.ts
+++ b/tests/utils/math.test.ts
@@ -1,19 +1,15 @@
-import { toFixedNumber, clamp } from '../math';
+import { toFixedNumber, clamp } from '@/utils/math';
 
 describe('math function', () => {
   it.each([
-    [0, 1],
-    [1, 1.3],
-    [2, 1.35],
-    [3, 1.346],
+    [0, 1.3456, 1],
+    [1, 1.3456, 1.3],
+    [2, 1.3456, 1.35],
+    [3, 1.3456, 1.346],
   ])(
     'should round a number to the specified number of decimal places',
-    (digits, expected) => {
-      // Arrange
-      const input = 1.3456;
-      // Act
+    (digits, input, expected) => {
       const result = toFixedNumber(digits)(input);
-      // Assert
       expect(result).toBe(expected);
     }
   );
diff --git a/src/utils/__tests__/mdx.test.ts b/tests/utils/mdx.test.ts
similarity index 92%
rename from src/utils/__tests__/mdx.test.ts
rename to tests/utils/mdx.test.ts
index 9e545cf1..59c0e6ff 100644
--- a/src/utils/__tests__/mdx.test.ts
+++ b/tests/utils/mdx.test.ts
@@ -1,4 +1,4 @@
-import { getDataById, getAllDataFrontmatter } from '../mdx';
+import { getDataById, getAllDataFrontmatter } from '@/utils/mdx';
 
 const mockReaddir = jest.fn();
 const mockExists = jest.fn();
@@ -30,14 +30,11 @@ describe('Get post list function', () => {
   });
 
   it('should get post list descending by date', async () => {
-    // Arrange
     mockReaddir.mockReturnValueOnce(['test_A.md', 'test_B.mdx', 'test_C.md']);
     mockReadFile.mockReturnValueOnce(mockFileA);
     mockReadFile.mockReturnValueOnce(mockFileB);
     mockReadFile.mockReturnValueOnce(mockFileC);
-    // Act
     const postList = await getAllDataFrontmatter('posts');
-    // Assert
     expect(postList).toStrictEqual([
       { id: 'test_C', date: '2023/07/09' },
       { id: 'test_A', date: '2023/07/08' },
@@ -46,14 +43,11 @@ describe('Get post list function', () => {
   });
 
   it('should return same id error with reject', async () => {
-    // Arrange
     const expected = Error('Duplicate id "test_A" found in "test_A.mdx"');
     mockReaddir.mockReturnValueOnce(['test_A.md', 'test_A.mdx']);
     mockReadFile.mockReturnValue('');
     expect.assertions(1);
-    // Act
     const result = getAllDataFrontmatter('posts');
-    // Assert
     await expect(result).rejects.toStrictEqual(expected);
   });
 });
@@ -66,12 +60,9 @@ describe('Get post data function', () => {
   });
 
   it('should get post data by mdx file', async () => {
-    // Arrange
     mockExists.mockReturnValueOnce(true);
     mockReadFile.mockReturnValueOnce(mockFileB);
-    // Act
     const postData = await getDataById('posts', 'test_B');
-    // Assert
     expect(postData).toStrictEqual({
       content: '測試文章B',
       frontmatter: { date: '2023/07/07' },
@@ -80,12 +71,9 @@ describe('Get post data function', () => {
   });
 
   it('should get post data by md file', async () => {
-    // Arrange
     mockExists.mockReturnValueOnce(false);
     mockReadFile.mockReturnValueOnce(mockFileC);
-    // Act
     const postData = await getDataById('posts', 'test_C');
-    // Assert
     expect(postData).toStrictEqual({
       content: '測試文章C',
       frontmatter: { date: '2023/07/09' },
@@ -94,14 +82,11 @@ describe('Get post data function', () => {
   });
 
   it('should return null when trying to get post data for a non-existing file', async () => {
-    // Arrange
     mockExists.mockReturnValueOnce(false);
     mockReadFile.mockImplementation(() => {
       throw new Error('File not found');
     });
-    // Act
     const postData = await getDataById('posts', 'not_found');
-    // Assert
     expect(postData).toBe(null);
   });
 });