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

@@ -12,7 +12,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-		"lint:prettier": "prettier . --write"
+    "lint:prettier": "prettier . --write",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "next": "14.2.3",
@@ -22,6 +24,9 @@
   },
   "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",
@@ -31,6 +36,8 @@
     "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",
@@ -38,6 +45,7 @@
     "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>
 	)