test: fixing tests

Author: anyulled

package-lock.json

@@ -8,6 +8,7 @@
     "@egjs/react-flicking": "^4.12.0",
     "@sentry/react": "^9.14.0",
     "@sentry/tracing": "^7.120.3",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.15.3",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
@@ -69,7 +70,6 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.6.0",
     "@types/google-map-react": "^2.1.10",
-    "@types/jest": "^29.5.13",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.32.0",

package.json

@@ -4,25 +4,23 @@ import Speakers2024 from "./Speakers2024";
 import {
   createMockSpeakers,
   renderWithRouterAndQueryClient,
-} from "../../utils/testing/speakerTestUtils";
+} from "@utils/testing/speakerTestUtils";
 import { useFetchSpeakers } from "@hooks/useFetchSpeakers";
-import userEvent from "@testing-library/user-event";
+import { useWindowSize } from "react-use";
+import { type MockedFunction, vi } from "vitest";
 
-import { vi } from "vitest";
-import { gaEventTracker } from "@components/analytics/Analytics";
+vi.mock("@hooks/useFetchSpeakers");
 
-vi.mock("../../hooks/useFetchSpeakers");
-
-vi.mock("../../components/analytics/Analytics", () => ({
-  gaEventTracker: jest.fn(),
+vi.mock("@components/analytics/Analytics", () => ({
+  gaEventTracker: vi.fn(),
 }));
 vi.mock("react-use", () => ({
   useWindowSize: vi.fn(),
 }));
 vi.mock("@sentry/react", () => ({
-  captureException: jest.fn(),
+  captureException: vi.fn(),
 }));
-vi.mock("../../data/2024.json", () => ({
+vi.mock("@data/2024.json", () => ({
   hideSpeakers: false,
   edition: "2024",
   title: "DevBcn",
@@ -33,15 +31,17 @@ vi.mock("../../data/2024.json", () => ({
   },
 }));
 
-const mockedUseFetchSpeakers = useFetchSpeakers as jest.MockedFunction<
+const mockedUseFetchSpeakers = useFetchSpeakers as MockedFunction<
   typeof useFetchSpeakers
 >;
 
 describe("Speakers2024 component", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    require("react-use").useWindowSize.mockReturnValue({ width: 1200 });
+    (useWindowSize as MockedFunction<typeof useWindowSize>).mockReturnValue({
+      width: 1200,
+      height: 0,
+    });
   });
 
   it("displays loading state when data is being fetched", () => {
@@ -99,70 +99,6 @@ describe("Speakers2024 component", () => {
     originalModule.hideSpeakers = originalHideSpeakers;
   });
 
-  it.skip("displays CFP button when current date is within CFP period", () => {
-    // Mock the hook to return success state with data
-    mockedUseFetchSpeakers.mockReturnValue({
-      data: [],
-      isLoading: false,
-      error: null,
-      isSuccess: true,
-    });
-
-    // Mock Date to return a date within the CFP period
-    const originalDate = Date;
-    const mockDate = new Date("2023-01-15");
-    global.Date = class extends Date {
-      constructor() {
-        return mockDate;
-      }
-
-      static now() {
-        return mockDate.getTime();
-      }
-    } as unknown as typeof Date;
-
-    renderWithRouterAndQueryClient(<Speakers2024 />);
-
-    const cfpButton = screen.getByText(/Apply to be a Speaker/i);
-    expect(cfpButton).toBeInTheDocument();
-
-    // Restore original Date
-    global.Date = originalDate;
-  });
-
-  it.skip("tracks CFP button clicks", async () => {
-    // Mock the hook to return success state with data
-    mockedUseFetchSpeakers.mockReturnValue({
-      data: [],
-      isLoading: false,
-      error: null,
-      isSuccess: true,
-    });
-
-    // Mock Date to return a date within the CFP period
-    const originalDate = Date;
-    const mockDate = new Date("2023-01-15");
-    global.Date = class extends Date {
-      constructor() {
-        return mockDate;
-      }
-
-      static now() {
-        return mockDate.getTime();
-      }
-    } as unknown as typeof Date;
-
-    renderWithRouterAndQueryClient(<Speakers2024 />);
-
-    const cfpButton = screen.getByText(/Apply to be a Speaker/i);
-    await userEvent.click(cfpButton);
-
-    expect(gaEventTracker).toHaveBeenCalledWith("CFP", "CFP");
-
-    // Restore original Date
-    global.Date = originalDate;
-  });
-
   it("calls useFetchSpeakers with the correct year", () => {
     // Mock the hook to return loading state
     mockedUseFetchSpeakers.mockReturnValue({

src/2024/Speakers/Speakers2024.test.tsx

@@ -47,7 +47,7 @@ import {
   ROUTE_TALKS,
   ROUTE_TRAVEL,
   ROUTE_WORKSHOPS,
-} from "./constants/routes";
+} from "@constants/routes";
 
 import Footer from "./components/Footer/Footer";
 import HomeWrapper from "./views/Home/HomeWrapper";
@@ -57,7 +57,7 @@ import SpeakerDetailContainer from "./views/SpeakerDetail/SpeakerDetailContainer
 import { styled } from "styled-components";
 import React, { FC } from "react";
 import { CookieConsent } from "react-cookie-consent";
-import { Color } from "./styles/colors";
+import { Color } from "@styles/colors";
 import Loading from "./components/Loading/Loading";
 import { QueryClient, QueryClientProvider } from "react-query";
 import Talks from "./views/Talks/Talks";

src/App.tsx

@@ -3,7 +3,7 @@ import Button from "./Button";
 import { vi } from "vitest";
 
 vi.mock("../../components/analytics/Analytics", () => ({
-  gaEventTracker: jest.fn(),
+  gaEventTracker: vi.fn(),
 }));
 
 describe("Button", () => {

src/components/UI/Button.test.tsx

@@ -1,10 +1,6 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
-import { TextEncoder } from 'util';
-import { vi } from 'vitest';
+import { TextEncoder } from "util";
+import { vi } from "vitest";
 
 global.TextEncoder = TextEncoder;
 window.scrollTo = vi.fn();

src/setupTests.ts

@@ -1,13 +1,11 @@
 import React, { Suspense } from "react";
 import { BrowserRouter, Route, Routes } from "react-router";
-import { ISpeaker } from "../../types/speakers";
+import { ISpeaker } from "@types/speakers";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { render, RenderOptions, RenderResult } from "@testing-library/react";
 
-// Re-export everything from testing-library
 export * from "@testing-library/react";
 
-// Create mock speaker data
 export const createMockSpeaker = (overrides = {}): ISpeaker => ({
   id: "1",
   fullName: "John Smith",
@@ -35,7 +33,6 @@ export const createMockSpeaker = (overrides = {}): ISpeaker => ({
   ...overrides,
 });
 
-// Create an array of mock speakers
 export const createMockSpeakers = (count: number): ISpeaker[] => {
   return Array.from({ length: count }, (_, i) =>
     createMockSpeaker({
@@ -47,7 +44,6 @@ export const createMockSpeakers = (count: number): ISpeaker[] => {
   );
 };
 
-// Create a custom render function that includes the BrowserRouter
 export function renderWithRouter(
   ui: React.ReactElement,
   options?: Omit<RenderOptions, "wrapper">,
@@ -65,7 +61,6 @@ export function renderWithRouter(
   return render(ui, { wrapper, ...options });
 }
 
-// Create a custom render function that includes both BrowserRouter and QueryClientProvider
 export function renderWithRouterAndQueryClient(
   ui: React.ReactElement,
   options?: Omit<RenderOptions, "wrapper">,
@@ -92,18 +87,3 @@ export function renderWithRouterAndQueryClient(
 
   return render(ui, { wrapper, ...options });
 }
-
-// Mock the useFetchSpeakers hook
-export const mockUseFetchSpeakers = (
-  data: ISpeaker[] | null = null,
-  isLoading = false,
-  error: Error | null = null,
-  isSuccess = !isLoading && !error,
-) => {
-  return {
-    data,
-    isLoading,
-    error,
-    isSuccess,
-  };
-};

src/utils/testing/speakerTestUtils.tsx

@@ -8,10 +8,10 @@ import {
 import { useFetchSpeakers } from "../../hooks/useFetchSpeakers";
 import userEvent from "@testing-library/user-event";
 import { gaEventTracker } from "../../components/analytics/Analytics";
-import { vi } from "vitest";
+import { type MockedFunction, vi } from "vitest";
 // Mock the useFetchSpeakers hook
 vi.mock("../../hooks/useFetchSpeakers");
-const mockedUseFetchSpeakers = useFetchSpeakers as vi.MockedFunction<
+const mockedUseFetchSpeakers = useFetchSpeakers as MockedFunction<
   typeof useFetchSpeakers
 >;
 

src/views/Speakers/Speakers.test.tsx

@@ -10,12 +10,12 @@ import { StyledSectionsSeparator } from "../CodeOfConduct/CodeOfConduct";
 import { keyframes, styled } from "styled-components";
 import data from "@data/2024.json";
 import { MOBILE_BREAKPOINT } from "@constants/BreakPoints";
-import LessThanBlue from "../../assets/images/MoreThanBlueWhiteIcon.svg";
-import MoreThanBlue from "../../assets/images/LessThanBlueWhiteIcon.svg";
+import LessThanBlue from "@assets/images/MoreThanBlueWhiteIcon.svg";
+import MoreThanBlue from "@assets/images/LessThanBlueWhiteIcon.svg";
 import { useWindowSize } from "react-use";
-import youtube from "../../assets/images/youtube.svg";
-import linkedinIcon from "../../assets/images/linkedinIcon.svg";
-import twitterIcon from "../../assets/images/twitterIcon.svg";
+import youtube from "@assets/images/youtube.svg";
+import linkedinIcon from "@assets/images/linkedinIcon.svg";
+import twitterIcon from "@assets/images/twitterIcon.svg";
 import { useDocumentTitleUpdater } from "@hooks/useDocumentTitleUpdate";
 
 const StyledParagraph = styled.p`

src/views/kcd/Kcd.tsx

@@ -53,7 +53,8 @@
       "@types/*": [
         "types/*"
       ]
-    }
+    },
+    "types": ["@testing-library/jest-dom"]
   },
   "include": [
     "src"