diff --git a/jest.config.ts b/jest.config.ts new file mode 100644 index 0000000..549793a --- /dev/null +++ b/jest.config.ts @@ -0,0 +1,24 @@ +import type { Config } from "jest" + +import nextJest from "next/jest.js" + +const createJestConfig = nextJest({ + dir: "./", +}) + +const config: Config = { + coverageProvider: "v8", + testEnvironment: "jsdom", + setupFilesAfterEnv: ["/jest.setup.ts"], + moduleNameMapper: { + "@app/(.*)$": "/src/app/$1", + "@entities/(.*)$": "/src/entities/$1", + "@features/(.*)$": "/src/features/$1", + "@pagesLayer/(.*)$": "/src/pagesLayer/$1", + "@shared/(.*)$": "/src/shared/$1", + "@widgets/(.*)$": "/src/widgets/$1", + "@/(.*)$": "/src/$1", + }, +} + +export default createJestConfig(config) diff --git a/jest.setup.ts b/jest.setup.ts new file mode 100644 index 0000000..df6631e --- /dev/null +++ b/jest.setup.ts @@ -0,0 +1 @@ +import "@testing-library/jest-dom" diff --git a/package.json b/package.json index d3b6ce4..859b26e 100644 --- a/package.json +++ b/package.json @@ -1,44 +1,52 @@ { - "name": "fsd-nest-template", - "description": "Pure Next.js FSD template with stylelint, prettier and eslint", - "author": { - "name": "@yunglocokid (Dmitriy Bratchikov)", - "url": "https://github.com/yunglocokid" - }, - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "lint": "next lint", - "lint:prettier": "prettier . --write" - }, - "dependencies": { - "next": "14.2.3", - "normalize.css": "^8.0.1", - "react": "^18", - "react-dom": "^18" - }, - "devDependencies": { - "@ianvs/prettier-plugin-sort-imports": "^4.2.1", - "@types/node": "^20", - "@types/react": "^18", - "@types/react-dom": "^18", - "eslint": "^8", - "eslint-config-next": "14.2.3", - "eslint-import-resolver-typescript": "^3.6.1", - "eslint-plugin-boundaries": "^4.2.1", - "eslint-plugin-react-hooks": "^4.6.2", - "eslint-plugin-react-refresh": "^0.4.7", - "prettier": "^3.2.5", - "sass": "^1.77.1", - "stylelint": "^16.5.0", - "stylelint-config-standard": "^36.0.0", - "stylelint-config-standard-scss": "^13.1.0", - "stylelint-order": "^6.0.4", - "stylelint-order-config-standard": "^0.1.3", - "typescript": "^5", - "typescript-eslint": "^7.10.0" - } + "name": "fsd-nest-template", + "description": "Pure Next.js FSD template with stylelint, prettier and eslint", + "author": { + "name": "@yunglocokid (Dmitriy Bratchikov)", + "url": "https://github.com/yunglocokid" + }, + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "lint:prettier": "prettier . --write", + "test": "jest", + "test:watch": "jest --watch" + }, + "dependencies": { + "next": "14.2.3", + "normalize.css": "^8.0.1", + "react": "^18", + "react-dom": "^18" + }, + "devDependencies": { + "@ianvs/prettier-plugin-sort-imports": "^4.2.1", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.7", + "@types/jest": "^29.5.12", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.3", + "eslint-import-resolver-typescript": "^3.6.1", + "eslint-plugin-boundaries": "^4.2.1", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-refresh": "^0.4.7", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "prettier": "^3.2.5", + "sass": "^1.77.1", + "stylelint": "^16.5.0", + "stylelint-config-standard": "^36.0.0", + "stylelint-config-standard-scss": "^13.1.0", + "stylelint-order": "^6.0.4", + "stylelint-order-config-standard": "^0.1.3", + "ts-node": "^10.9.2", + "typescript": "^5", + "typescript-eslint": "^7.10.0" + } } diff --git a/src/pagesLayer/HomePage/ui/HomePage.module.scss b/src/pagesLayer/HomePage/ui/HomePage.module.scss index a800136..67eab5c 100644 --- a/src/pagesLayer/HomePage/ui/HomePage.module.scss +++ b/src/pagesLayer/HomePage/ui/HomePage.module.scss @@ -35,6 +35,10 @@ font-size: 1vw; } +.testHint { + margin: 0 30px; +} + .link { transition: 0.3s; animation: shine 4s linear infinite; diff --git a/src/pagesLayer/HomePage/ui/HomePage.test.tsx b/src/pagesLayer/HomePage/ui/HomePage.test.tsx new file mode 100644 index 0000000..9772b8b --- /dev/null +++ b/src/pagesLayer/HomePage/ui/HomePage.test.tsx @@ -0,0 +1,19 @@ +import "@testing-library/jest-dom" + +import { render, screen } from "@testing-library/react" + +import HomePage from "./HomePage" + +describe("Page", () => { + test("renders a yunglocokid", () => { + render() + const yunglocokid: HTMLElement = screen.getByText("yunglocokid") + expect(yunglocokid).toBeInTheDocument() + }) + test("renders a hint", () => { + render() + screen.debug() + const hint: HTMLElement = screen.getByTestId("hint-code") + expect(hint).toBeInTheDocument() + }) +}) diff --git a/src/pagesLayer/HomePage/ui/HomePage.tsx b/src/pagesLayer/HomePage/ui/HomePage.tsx index 7402532..0903c26 100644 --- a/src/pagesLayer/HomePage/ui/HomePage.tsx +++ b/src/pagesLayer/HomePage/ui/HomePage.tsx @@ -15,9 +15,12 @@ const HomePage = () => { yunglocokid

-
+			
 				You can edit src/pagesLayer/HomePage{" "}
-				to start {"<3"}!
+				to start {"<3"}!
+ + You can also test your application using Jest :D. Try it! +
)