test: improve tests

xboy2012 · xboy2012 · commit 0a67ffb03822 · 2025-10-14T18:21:31.000-07:00
diff --git a/components/About/About.test.tsx b/components/About/About.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { About } from '.';
 
diff --git a/components/Article.test.tsx b/components/Article.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { Article } from './Article';
 
diff --git a/components/ArticleTitle.test.tsx b/components/ArticleTitle.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { ArticleTitle } from './ArticleTitle';
 
diff --git a/components/Blog/Blog.test.tsx b/components/Blog/Blog.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { Blog } from '.';
 import { getBlogs } from '../../src/blogs/getBlogs';
diff --git a/components/BlogDetail/BlogDetail.test.tsx b/components/BlogDetail/BlogDetail.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { BlogDetail } from '.';
 import { formatDateTime } from '../../src/utils/formatDateTime';
diff --git a/components/FixPageUrl.test.tsx b/components/FixPageUrl.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { FixPageUrl } from './FixPageUrl';
 
diff --git a/components/NavBar.test.tsx b/components/NavBar.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { NavBar } from './NavBar';
 
diff --git a/components/NavBarItem.test.tsx b/components/NavBarItem.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { NavBarItem } from './NavBarItem';
 
diff --git a/components/NotFound.test.tsx b/components/NotFound.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { NotFound } from './NotFound';
 import type { FixPageUrlStatus } from '../src/hooks/useFixPageUrl';
diff --git a/components/Obfuscate/Obfuscate.test.tsx b/components/Obfuscate/Obfuscate.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { Obfuscate } from '.';
 
diff --git a/components/Portfolio/Portfolio.test.tsx b/components/Portfolio/Portfolio.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { Portfolio } from '.';
 import type { Thing } from 'schema-dts';
diff --git a/components/Portfolio/ProjectFilterDropDown.test.tsx b/components/Portfolio/ProjectFilterDropDown.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ProjectFilterDropDown } from './ProjectFilterDropDown';
 import { categories } from './categories';
diff --git a/components/Portfolio/ProjectFilterFlat.test.tsx b/components/Portfolio/ProjectFilterFlat.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ProjectFilterFlat } from './ProjectFilterFlat';
 import { categories } from './categories';
diff --git a/components/Portfolio/Projects.test.tsx b/components/Portfolio/Projects.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Projects } from './Projects';
 import { categories } from './categories';
diff --git a/components/Resume/Resume.test.tsx b/components/Resume/Resume.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { Resume } from '.';
 
diff --git a/components/ServiceWorkerRegister.test.tsx b/components/ServiceWorkerRegister.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import { ServiceWorkerRegister } from './ServiceWorkerRegister';
 
diff --git a/components/SideBar/EmailRender.test.tsx b/components/SideBar/EmailRender.test.tsx
@@ -1,16 +1,48 @@
 import { render, screen } from '@testing-library/react';
 import { EmailRender } from './EmailRender';
+import { useMounted } from '../../src/hooks/useMounted';
+import { preventDefault } from '../../src/utils/preventDefault';
+
+jest.mock('../../src/hooks/useMounted');
+jest.mock('../../src/utils/preventDefault', () => ({
+  preventDefault: jest.fn(),
+}));
 
 jest.mock('../Obfuscate', () => ({
-  Obfuscate: ({ text }: { text: string }) => <div>{text}</div>,
+  Obfuscate: () => <div>Obfuscate</div>,
 }));
 
 describe('EmailRender', () => {
-  it('renders correctly', () => {
+  let mounted: boolean;
+
+  beforeAll(() => {
+    jest.mocked(useMounted).mockImplementation(() => mounted);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly mounted=false', () => {
+    mounted = false;
+    const email = 'example@example.com';
+    render(<EmailRender email={email} />);
+    expect(screen.getByText('Obfuscate')).toBeInTheDocument();
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('href', '#');
+    anchor.click();
+    expect(preventDefault).toHaveBeenCalled();
+  });
+
+  it('renders correctly mounted=true', () => {
+    mounted = true;
     const email = 'example@example.com';
     render(<EmailRender email={email} />);
-    expect(screen.getByText(email)).toBeInTheDocument();
+    expect(screen.getByText('Obfuscate')).toBeInTheDocument();
     const href = `mailto:${email}`;
-    expect(screen.getByRole('link')).toHaveAttribute('href', href);
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('href', href);
+    anchor.click();
+    expect(preventDefault).not.toHaveBeenCalled();
   });
 });
diff --git a/components/SideBar/EmailRender.tsx b/components/SideBar/EmailRender.tsx
@@ -8,7 +8,7 @@ export const EmailRender = ({ email }: { email: string }) => {
   return (
     <a
       onClick={mounted ? undefined : preventDefault}
-      href={mounted ? `mailto:${email}` : undefined}
+      href={mounted ? `mailto:${email}` : '#'}
       className={cx(
         'block cursor-pointer text-3.5 md:text-4 font-300',
         '2xl:whitespace-nowrap 2xl:overflow-hidden 2xl:text-ellipsis',
diff --git a/components/SideBar/PhoneRender.test.tsx b/components/SideBar/PhoneRender.test.tsx
@@ -1,21 +1,53 @@
 import { render, screen } from '@testing-library/react';
 import { PhoneRender } from './PhoneRender';
+import { useMounted } from '../../src/hooks/useMounted';
+import { preventDefault } from '../../src/utils/preventDefault';
+
+jest.mock('../../src/hooks/useMounted');
+jest.mock('../../src/utils/preventDefault', () => ({
+  preventDefault: jest.fn(),
+}));
 
 jest.mock('../../src/utils/displayPhoneCA', () => ({
   displayPhoneCA: (phone: string) => phone,
 }));
 
 jest.mock('../Obfuscate', () => ({
-  Obfuscate: ({ text }: { text: string }) => <div>{text}</div>,
+  Obfuscate: () => <div>Obfuscate</div>,
 }));
 
 describe('PhoneRender', () => {
-  it('renders correctly', () => {
+  let mounted: boolean;
+
+  beforeAll(() => {
+    jest.mocked(useMounted).mockImplementation(() => mounted);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly mounted=false', () => {
+    mounted = false;
+    const phoneCA = '123456';
+    render(<PhoneRender phoneCA={phoneCA} />);
+    expect(screen.getByText('Obfuscate')).toBeInTheDocument();
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('href', '#');
+    anchor.click();
+    expect(preventDefault).toHaveBeenCalled();
+  });
+
+  it('renders correctly mounted=true', () => {
+    mounted = true;
     const phoneCA = '123456';
     render(<PhoneRender phoneCA={phoneCA} />);
-    expect(screen.getByText(phoneCA)).toBeInTheDocument();
+    expect(screen.getByText('Obfuscate')).toBeInTheDocument();
 
     const href = `tel:${phoneCA}`;
-    expect(screen.getByRole('link')).toHaveAttribute('href', href);
+    const anchor = screen.getByRole('link');
+    expect(anchor).toHaveAttribute('href', href);
+    anchor.click();
+    expect(preventDefault).not.toHaveBeenCalled();
   });
 });
diff --git a/components/SideBar/PhoneRender.tsx b/components/SideBar/PhoneRender.tsx
@@ -9,7 +9,7 @@ export const PhoneRender = ({ phoneCA }: { phoneCA: string }) => {
   return (
     <a
       onClick={mounted ? undefined : preventDefault}
-      href={mounted ? `tel:${phoneCA}` : undefined}
+      href={mounted ? `tel:${phoneCA}` : '#'}
       className={cx(
         'block cursor-pointer text-3.5 md:text-4 font-300',
         '2xl:whitespace-nowrap 2xl:overflow-hidden 2xl:text-ellipsis',
diff --git a/components/SideBar/SideBar.test.tsx b/components/SideBar/SideBar.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { SideBar } from '.';
 
diff --git a/components/mdx/index.test.tsx b/components/mdx/index.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import type { ComponentType, PropsWithChildren } from 'react';
 import { render, screen } from '@testing-library/react';
 import { getMdxComponents } from '.';
diff --git a/src/hooks/useFixPageUrl.test.ts b/src/hooks/useFixPageUrl.test.ts
@@ -1,5 +1,4 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import { useFixPageUrl } from './useFixPageUrl';
 import { replaceBrowserUrl } from '../utils/replaceBrowserUrl';
 
@@ -17,21 +16,20 @@ jest.mock('../utils/getFixedPageUrl', () => {
   };
 });
 
-const App = () => {
-  useFixPageUrl();
-  return null;
-};
-
 describe('useFixPageUrl should work as expected', () => {
   test('should not redirect', () => {
     mockFixedPageUrl = undefined;
-    render(<App />);
+    renderHook(() => {
+      useFixPageUrl();
+    });
     expect(replaceBrowserUrl).not.toHaveBeenCalled();
   });
 
   test('should redirect', () => {
     mockFixedPageUrl = new URL('https://www.example.com/a');
-    render(<App />);
+    renderHook(() => {
+      useFixPageUrl();
+    });
     expect(replaceBrowserUrl).toHaveBeenCalled();
   });
 });
diff --git a/src/hooks/useJsonLD.client.test.tsx b/src/hooks/useJsonLD.client.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 import type { Thing } from 'schema-dts';
 import { useJsonLD } from './useJsonLD';
diff --git a/src/hooks/useNoJs.client.test.tsx b/src/hooks/useNoJs.client.test.tsx
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { useNoJs } from './useNoJs';
 
 describe('useNoJs should work as expected in Browser', () => {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import '@testing-library/jest-dom';`
`2`	`1`	`import { render } from '@testing-library/react';`
`3`	`2`	`import { About } from '.';`
`4`	`3`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import '@testing-library/jest-dom';`
`2`	`1`	`import { render, screen } from '@testing-library/react';`
`3`	`2`	`import { Article } from './Article';`
`4`	`3`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import '@testing-library/jest-dom';`
`2`	`1`	`import { fireEvent, render, screen } from '@testing-library/react';`
`3`	`2`	`import { NavBarItem } from './NavBarItem';`
`4`	`3`