Add test & fix prettier plugins

Author: dinhanhthi

.prettierrc

@@ -1,5 +1,5 @@
 {
-    "plugins": [],
+  "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
     "arrowParens": "avoid",
     "semi": false,
     "singleQuote": true,

README.md

@@ -28,6 +28,9 @@ yarn clean
 
 # reinstall
 yarn reinstall
+
+# run test in watch mode
+yarn test
 ```
 
 For an example of an api request, let's make a `GET` to `http://localhost:3001/api/hello`.

jest.config.mjs

@@ -0,0 +1,17 @@
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './'
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testEnvironment: 'jest-environment-jsdom'
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

jest.setup.ts

@@ -0,0 +1,2 @@
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'

package.json

@@ -1,12 +1,13 @@
 {
   "name": "nextjs-tailwind-starter",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Anh-Thi Dinh",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "test": "jest --watch",
     "lint": "next lint",
     "check": "yarn run prettier && yarn run build",
     "prettier": "prettier --write \"**/*.{tsx,ts,css,scss}\"",
@@ -28,14 +29,19 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/jest": "^29.5.8",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-tailwindcss": "^3.13.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "8.4.31",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.7",