test(unit): setup jest, add tests + gh workflow (#71)

test(unit): add tests for components

test(unit): fix Intoto001 test

test(unit): fix Explorer test

test(unit): fix Settings test

test(unit): fix SearchForm

fix issue with userEvent

fix issue with nested anchor links

test(unit): add test for decode

increase coverage for decode

ci(test): add workflow to run unit tests for pull requests

fix: allow isolatedModules for tests to support typed mocks

remove ts disabling for tests

Signed-off-by: kahboom <[email protected]>

.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 co-located 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,45 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+	dir: "./",
+});
+
+/** @type {import('jest').Config} */
+const config = {
+	// automatically clear mock calls and instances between every test
+	clearMocks: true,
+
+	// whether the coverage information should be collected while executing the test
+	collectCoverage: true,
+
+	// directory where Jest should output its coverage files
+	coverageDirectory: "coverage",
+	coverageProvider: "v8",
+
+	globals: {
+		"ts-jest": {
+			tsconfig: "<rootDir>/tsconfig.test.json",
+		},
+	},
+
+	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 });