Add testing dependencies

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

components/Nav/Nav.js → components/Nav/Nav.tsx

@@ -1,5 +1,9 @@
 import {
-  UilApps, UilArrowLeft, UilMoon, UilMultiply, UilSun
+  UilApps,
+  UilArrowLeft,
+  UilMoon,
+  UilMultiply,
+  UilSun,
 } from "@iconscout/react-unicons";
 import cn from "classnames";
 import Link from "next/link";
@@ -8,9 +12,9 @@ import { createElement, useEffect, useState } from "react";
 import { useAppContext } from "../../context/AppContextProvider";
 import rootStyles from "../../styles/root.module.css";
 import styles from "./nav.module.css";
-import NavLinkMobile from './NavLinkMobile.tsx';
-import NavLinkBigScreen from './NavLinkBigScreen.tsx';
-import { useTheme } from 'next-themes';
+import NavLinkMobile from "./NavLinkMobile";
+import NavLinkBigScreen from "./NavLinkBigScreen";
+import { useTheme } from "next-themes";
 
 export default function Nav() {
   const { navBarOpen, setNavBarOpen } = useAppContext();
@@ -41,38 +45,45 @@ export default function Nav() {
           )}
           <NavLinkBigScreen />
           <div className={styles.nav__btns}>
-            {mounted && createElement(
-              resolvedTheme === 'dark' ? UilSun : UilMoon,
-              {
-                className: cn(styles.nav__changeTheme),
-                id: "theme-button",
-                onClick: () => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark'),
-                width: 30,
-                height: 30
-              },
-              null
+            {mounted &&
+              createElement(
+                resolvedTheme === "dark" ? UilSun : UilMoon,
+                {
+                  className: cn(styles.nav__changeTheme),
+                  id: "theme-button",
+                  onClick: () =>
+                    setTheme(resolvedTheme === "dark" ? "light" : "dark"),
+                  width: 30,
+                  height: 30,
+                },
+                null
+              )}
+            {!mounted &&
+              createElement(
+                "div",
+                {
+                  className: cn(styles.skeleton_loader),
+                },
+                null
+              )}
+            {!navBarOpen && (
+              <UilApps
+                className={styles.nav__toggle}
+                id="nav_toggle"
+                onClick={() => setNavBarOpen(true)}
+                width={30}
+                height={30}
+              />
             )}
-            {!mounted && createElement(
-              'div',
-              {
-                className: cn(styles.skeleton_loader)
-              },
-              null
+            {navBarOpen && (
+              <UilMultiply
+                className={styles.nav__toggle}
+                width={30}
+                height={30}
+                id="nav_toggle"
+                onClick={() => setNavBarOpen(false)}
+              />
             )}
-            {!navBarOpen && <UilApps
-              className={styles.nav__toggle}
-              id="nav_toggle"
-              onClick={() => setNavBarOpen(true)}
-              width={30}
-              height={30}
-            />}
-            {navBarOpen && <UilMultiply
-              className={styles.nav__toggle}
-              width={30}
-              height={30}
-              id="nav_toggle"
-              onClick={() => setNavBarOpen(false)}
-            />}
           </div>
         </nav>
       </header>

config/jest/cssTransform.js

@@ -0,0 +1,8 @@
+module.exports = {
+    process() {
+        return 'module.exports = {};'
+    },
+    getCacheKey() {
+        return 'cssTransform'
+    },
+}

jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+  ],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '^.+\\.module\\.css$',
+  ],
+  moduleNameMapper: {
+    '^.+\\.module\\.css$': 'identity-obj-proxy',
+  },
+};

jest.setup.js

@@ -0,0 +1,6 @@
+// optional: configure or set up a testing framework before each test
+// if you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// used for __tests__/testing-library.js
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest"
   },
   "dependencies": {
     "@iconscout/react-unicons": "^1.1.6",
@@ -21,8 +22,14 @@
     "use-clipboard-copy": "^0.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^26.0.23",
     "@types/node": "^15.12.4",
     "@types/react": "^17.0.11",
+    "babel-jest": "^27.0.6",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.0.6",
     "typescript": "^4.3.4"
   }
 }

tests/footer.test.js

@@ -0,0 +1,42 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { useRouter } from "next/router";
+
+
+jest.mock("next/router", () => ({
+    useRouter: jest.fn(),
+}))
+
+import Footer from '../components/Footer/Footer'
+
+describe('Footer', () => {
+
+    const push = jest.fn();
+
+    useRouter.mockImplementation(() => ({
+        push,
+        pathname: "/",
+        route: "/",
+        asPath: "/",
+        query: "",
+    }));
+
+    it('Should render home link', () => {
+        const mockRouter = {
+            push: jest.fn() // the component uses `router.push` only
+        };
+        (useRouter).mockReturnValue(mockRouter);
+
+        const modalRoot = document.createElement('div');
+        modalRoot.setAttribute('id', 'modal-root')
+        document.body.appendChild(modalRoot)
+        render(<Footer />)
+        const linkElement = screen.getByText(
+            /Home/
+        )
+        expect(linkElement).toBeInTheDocument()
+    })
+})

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -21,9 +17,10 @@
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "jest.config.js",
+    "tests/nav.test.js",
+    "jest.setup.js"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }