[CHORE] Setup vitest unit testing and add example

.gitlab-ci.yml

@@ -2,9 +2,22 @@ default:
   image: node:16.16.0
 
 stages:
+  - test
   - deploy
   - sonarqube
 
+test_web:
+  stage: test
+  cache:
+    - key:
+        files:
+          - web/yarn.lock
+        paths:
+          - web/.yarn-cache/
+  script:
+    - yarn install --cache-folder .yarn-cache
+    - yarn test:no-watch
+
 deploy_preview_web:
   stage: deploy
   cache:

web/__tests__/routers/game.test.ts

+import "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+import { appRouter } from "../../src/server/api/root";
+
+import prisma from "../../src/server/__mocks__/db";
+
+vi.mock("../../src/server/db")
+
+describe("Game RPC", () => {
+  it("getAll should return all games", async () => {
+    const mockedDota = {
+      id: "test",
+      name: "DOTA2",
+      logoUrl: "Hello, World!",
+    }
+
+    prisma.game.findMany.mockResolvedValue([
+      mockedDota,
+      mockedDota,
+    ])
+
+    const ctx = {
+      session: null,
+      prisma
+    }
+
+    const caller = appRouter.createCaller(ctx)
+    const games = await caller.games.getAll()
+
+    expect(games).toHaveLength(2)
+    expect(games[0]).toStrictEqual(mockedDota)
+  })
+})

web/package.json

@@ -7,7 +7,9 @@
     "dev": "next dev",
     "postinstall": "prisma generate",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "test": "SKIP_ENV_VALIDATION=True vitest --watch",
+    "test:no-watch": "SKIP_ENV_VALIDATION=True vitest run"
   },
   "dependencies": {
     "@next-auth/prisma-adapter": "^1.0.5",
@@ -26,21 +28,30 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
+    "@jest/globals": "^29.4.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/node": "^18.11.18",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "@typescript-eslint/parser": "^5.47.1",
+    "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.7",
     "eslint": "^8.30.0",
     "eslint-config-next": "13.1.6",
+    "jest-environment-jsdom": "^29.4.3",
     "postcss": "^8.4.14",
     "prettier": "^2.8.1",
     "prettier-plugin-tailwindcss": "^0.2.1",
     "prisma": "^4.9.0",
     "tailwindcss": "^3.2.0",
-    "typescript": "^4.9.4"
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.9.4",
+    "vitest": "^0.29.2",
+    "vitest-mock-extended": "^1.0.9",
+    "vitest-sonar-reporter": "^0.3.5"
   },
   "ct3aMetadata": {
     "initVersion": "7.5.3"

web/src/server/__mocks__/db.ts

+import { PrismaClient } from "@prisma/client";
+import { beforeEach } from "vitest";
+import { mockDeep, mockReset } from "vitest-mock-extended";
+
+beforeEach(() => {
+  mockReset(prisma)
+})
+
+const prisma = mockDeep<PrismaClient>()
+export default prisma

web/vitest.config.ts

+import { fileURLToPath } from "url";
+import { configDefaults, defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    reporters: "vitest-sonar-reporter",
+    outputFile: "sonar-report.xml",
+    exclude: [...configDefaults.exclude, "**/e2e/**"],
+    alias: {
+      "~/": fileURLToPath(new URL("./src/", import.meta.url)),
+    },
+  },
+});