diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..1ff94f7 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["next/babel"] +} diff --git a/components/Nav/Nav.js b/components/Nav/Nav.tsx similarity index 50% rename from components/Nav/Nav.js rename to components/Nav/Nav.tsx index 50548c1..96a1840 100644 --- a/components/Nav/Nav.js +++ b/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() { )}
- {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 && ( + setNavBarOpen(true)} + width={30} + height={30} + /> )} - {!mounted && createElement( - 'div', - { - className: cn(styles.skeleton_loader) - }, - null + {navBarOpen && ( + setNavBarOpen(false)} + /> )} - {!navBarOpen && setNavBarOpen(true)} - width={30} - height={30} - />} - {navBarOpen && setNavBarOpen(false)} - />}
diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js new file mode 100644 index 0000000..fd2fa97 --- /dev/null +++ b/config/jest/cssTransform.js @@ -0,0 +1,8 @@ +module.exports = { + process() { + return 'module.exports = {};' + }, + getCacheKey() { + return 'cssTransform' + }, +} \ No newline at end of file diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..b76049a --- /dev/null +++ b/jest.config.js @@ -0,0 +1,20 @@ +module.exports = { + collectCoverageFrom: [ + '**/*.{js,jsx,ts,tsx}', + '!**/*.d.ts', + '!**/node_modules/**', + ], + setupFilesAfterEnv: ['/jest.setup.js'], + testPathIgnorePatterns: ['/node_modules/', '/.next/'], + transform: { + '^.+\\.(js|jsx|ts|tsx)$': '/node_modules/babel-jest', + '^.+\\.css$': '/config/jest/cssTransform.js', + }, + transformIgnorePatterns: [ + '/node_modules/', + '^.+\\.module\\.css$', + ], + moduleNameMapper: { + '^.+\\.module\\.css$': 'identity-obj-proxy', + }, +}; diff --git a/jest.setup.js b/jest.setup.js new file mode 100644 index 0000000..8aa300e --- /dev/null +++ b/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' \ No newline at end of file diff --git a/package.json b/package.json index 7f33a2b..f06f836 100644 --- a/package.json +++ b/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" } } diff --git a/tests/footer.test.js b/tests/footer.test.js new file mode 100644 index 0000000..aa79ecd --- /dev/null +++ b/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(