test(setup): add jest, configure for next.js + typescript (#30)

.eslintrc.json

@@ -1,3 +1,23 @@
 {
-	"extends": ["next", "prettier"]
+	"extends": [
+		"next/core-web-vitals",
+		"plugin:testing-library/react",
+		"plugin:react-hooks/recommended",
+		"prettier"
+	],
+	"plugins": ["react-hooks"],
+	"overrides": [
+		// Only use Testing Library lint rules in test files
+		{
+			"files": [
+				"**/__tests__/**/*.[jt]s?(x)",
+				"**/?(*.)+(spec|test).[jt]s?(x)"
+			],
+			"extends": ["plugin:testing-library/react"]
+		}
+	],
+	"rules": {
+		"@next/next/no-before-interactive-script-outside-document": "off",
+		"no-unused-vars": [1, { "args": "after-used", "argsIgnorePattern": "^_" }]
+	}
 }

.github/workflows/unit-tests.yaml

@@ -0,0 +1,19 @@
+name: 🧪 Unit Tests (Jest)
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  build:
+    name: 🧪 Unit Tests (Jest)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: 📦 Install modules
+        run: npm install
+      - name: ⚙️ Run tests
+        run: npm run test --coverage

README.md

@@ -14,6 +14,20 @@ npm run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
+## Tests
+
+### Unit Tests
+
+Run all [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) unit tests:
+
+```bash
+npm run test
+```
+
+Launches the test runner in the interactive watch mode.
+
+Tests are colocated and live as closely to corresponding code as possible.
+
 ## Deploy
 
 The app is based on [Next.JS](https://nextjs.org/) and is automatically built & deployed to GitHub Pages when pushing to the `main` branch.

jest.config.js

@@ -0,0 +1,41 @@
+const nextJest = require("next/jest");
+
+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 = {
+	// Automatically clear mock calls and instances between every test
+	clearMocks: true,
+
+	// Indicates whether the coverage information should be collected while executing the test
+	collectCoverage: true,
+
+	// The directory where Jest should output its coverage files
+	coverageDirectory: "coverage",
+	coverageProvider: "v8",
+
+	moduleNameMapper: {
+		// Handle module aliases
+		"^@/components/(.*)$": "<rootDir>/components/$1",
+	},
+
+	// Add more setup options before each test is run
+	setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+
+	testEnvironment: "jest-environment-jsdom",
+
+	testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
+
+	transformIgnorePatterns: [
+		"/node_modules/",
+		"^.+\\.module\\.(css|sass|scss)$",
+	],
+	verbose: true,
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(config);

jest.setup.js

@@ -0,0 +1,5 @@
+// Learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";
+import { TextEncoder, TextDecoder } from "util";
+
+Object.assign(global, { TextDecoder, TextEncoder });