Merge pull request #1 from yunglocokid/with-jest

feature: added jest

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: ["<rootDir>/jest.setup.ts"],
+	moduleNameMapper: {
+		"@app/(.*)$": "<rootDir>/src/app/$1",
+		"@entities/(.*)$": "<rootDir>/src/entities/$1",
+		"@features/(.*)$": "<rootDir>/src/features/$1",
+		"@pagesLayer/(.*)$": "<rootDir>/src/pagesLayer/$1",
+		"@shared/(.*)$": "<rootDir>/src/shared/$1",
+		"@widgets/(.*)$": "<rootDir>/src/widgets/$1",
+		"@/(.*)$": "<rootDir>/src/$1",
+	},
+}
+
+export default createJestConfig(config)

jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom"

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"
+  }
 }

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;

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(<HomePage />)
+		const yunglocokid: HTMLElement = screen.getByText("yunglocokid")
+		expect(yunglocokid).toBeInTheDocument()
+	})
+	test("renders a hint", () => {
+		render(<HomePage />)
+		screen.debug()
+		const hint: HTMLElement = screen.getByTestId("hint-code")
+		expect(hint).toBeInTheDocument()
+	})
+})

src/pagesLayer/HomePage/ui/HomePage.tsx

@@ -15,9 +15,12 @@ const HomePage = () => {
 					yunglocokid
 				</Link>
 			</p>
-			<pre className={cls.hint}>
+			<pre className={cls.hint} data-testid="hint-code">
 				You can edit <span className={cls.path}>src/pagesLayer/HomePage</span>{" "}
-				to start {"<3"}!
+				to start {"<3"}!<br />
+				<small className={cls.testHint}>
+					You can also test your application using Jest :D. Try it!
+				</small>
 			</pre>
 		</div>
 	)