update jest deps

.eslintrc.js

@@ -3,6 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
     node: true,
+    jest: true,
   },
   extends: [
     "eslint:recommended",

components/CardSubTitle/__tests__/CardSubTitle.spec.tsx

@@ -0,0 +1,73 @@
+import React, { ComponentProps } from "react";
+
+import { render, screen } from "@testing-library/react";
+import { useRouter } from "next/router";
+
+import { CardSubTitle } from "components";
+import { CardType } from "components/CardContent";
+import { AppContextProvider } from "context/AppContextProvider";
+import { useOnScreen } from "hooks";
+import { IUtilsMocks } from "types/mocks";
+import { Language } from "utils";
+
+jest.mock("hooks/useOnScreen");
+
+const { getAllTranslations } = jest.requireActual<IUtilsMocks>(
+  "utils/__tests__/__mocks__/mocks.ts"
+);
+
+interface IMocks {
+  push?: () => void;
+  useOnScreen?: boolean;
+}
+
+interface ISetupProps {
+  props: ComponentProps<typeof CardSubTitle>;
+  mocks?: IMocks;
+}
+
+describe("cardSubTitle", () => {
+  function setup({ props, mocks }: ISetupProps) {
+    (useOnScreen as jest.Mock).mockImplementationOnce(
+      () => mocks?.useOnScreen ?? true
+    );
+    const push = jest.fn();
+    (useRouter as jest.Mock).mockImplementation(() => ({
+      asPath: "/",
+      push: mocks?.push ?? push,
+      query: {
+        country: "US",
+      },
+    }));
+
+    const translations = getAllTranslations(Language.EN);
+    render(
+      <AppContextProvider translations={translations}>
+        <CardSubTitle {...props} />
+      </AppContextProvider>
+    );
+  }
+
+  it("should receive correct props when type is ALBUM and compilation is in item", () => {
+    expect.assertions(1);
+    const item = {
+      album_type: "compilation",
+      artists: [
+        {
+          name: "artist1",
+        },
+        {
+          name: "artist2",
+        },
+      ],
+      release_date: "2022-02-04",
+    } as unknown as ISetupProps["props"]["item"];
+    const push = jest.fn();
+    setup({ props: { type: CardType.ALBUM, item }, mocks: { push } });
+    expect(
+      screen.getAllByText((_, element) => {
+        return element?.textContent === "2022 · Compilation · artist1, artist2";
+      })
+    ).toBeTruthy();
+  });
+});

jest.config.js

@@ -37,7 +37,7 @@ const customJestConfig = {
     "^@/(.*)$": join(process.cwd(), "src", "$1"),
   },
   setupFiles: ["jest-canvas-mock"],
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
   testMatch: ["<rootDir>/**/*.(spec|test).(js|jsx|ts|tsx)"],
   moduleDirectories: ["<rootDir>", "node_modules"],
   coverageThreshold: {

jest.setup.js → jest.setup.ts

@@ -1,5 +1,6 @@
-import "@testing-library/jest-dom/extend-expect";
-import { beforeAll, afterAll, jest } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { afterAll, beforeAll, jest } from "@jest/globals";
+import { NextRouter } from "next/router";
 
 process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID = "clientId";
 process.env.NEXT_PUBLIC_SPOTIFY_REDIRECT_URL =
@@ -10,7 +11,7 @@ process.env.SETLIST_FM_API_KEY = "setlistFmApiKey";
 process.env.SPOTIFY_ACCESS_COOKIE = "accessCookie";
 
 jest.mock("next/router", () => ({
-  ...jest.requireActual("next/router"),
+  ...jest.requireActual<NextRouter>("next/router"),
   useRouter: jest.fn().mockImplementation(() => ({
     asPath: "/",
     push: jest.fn(),

layouts/MainLayout.tsx

@@ -20,22 +20,22 @@ export default function MainLayout({
     document.documentElement.style.setProperty("--vh", `${vh}px`);
   }, []);
 
+  if (isLoginPage) {
+    return (
+      <>
+        <div>
+          <TopBar />
+          {children}
+        </div>
+        <Footer />
+      </>
+    );
+  }
+
   return (
     <>
-      {isLoginPage ? (
-        <>
-          <div>
-            <TopBar />
-            {children}
-          </div>
-          <Footer />
-        </>
-      ) : (
-        <>
-          <AppContainer>{children}</AppContainer>
-          <SpotifyPlayer />
-        </>
-      )}
+      <AppContainer>{children}</AppContainer>
+      <SpotifyPlayer />
     </>
   );
 }