feat: add vitest for unit tests

.github/workflows/website.yml

@@ -18,37 +18,59 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - uses: actions/cache@v3
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn
+        uses: actions/cache@v3
+        id: yarn-cache
         with:
-          path: ~/.cache/yarn
-          key: ${{ runner.os }}-yarn-${{ hashFiles('website/**/yarn.lock') }}
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ~/.cache/yarn
+          key: ${{ runner.os }}-yarn-${{ hashFiles('variation/**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
+
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn --immutable
+
       - name: Check format
-        run: yarn run lint
-
-#  unitTests:
-#    name: Unit Tests
-#    timeout-minutes: 10
-#    runs-on: ubuntu-latest
-#    steps:
-#      - uses: actions/checkout@v4
-#      - uses: actions/setup-node@v4
-#        with:
-#          node-version: lts/*
-#      - name: Cache .npm
-#        uses: actions/cache@v3
-#        with:
-#          path: ~/.npm
-#          key: ${{ runner.os }}-node-${{ hashFiles('variation/**/package-lock.json') }}
-#      - name: Install dependencies
-#        run: npm ci
-#      - name: Run tests
-#        run: npm run test
-#
+        run: yarn lint
+
+  unitTests:
+    name: Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn
+        uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            ~/.cache/yarn
+          key: ${{ runner.os }}-yarn-${{ hashFiles('variation/**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn --immutable
+
+      - name: Run tests
+        run: yarn test

website/package.json

@@ -7,27 +7,32 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier --write '*/**/*.{js,jsx,ts,tsx,json,css,md}'"
+    "format": "prettier --write '*/**/*.{js,jsx,ts,tsx,json,css,md}'",
+    "test": "vitest"
   },
   "dependencies": {
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.1.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "jsdom": "^24.0.0",
     "postcss": "^8",
     "prettier": "^3.1.1",
     "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^1.2.2"
   }
 }

website/src/__tests__/page.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Home from '../app/page';
+
+test('Home', () => {
+    render(<Home />);
+    expect(screen.getByRole('heading', { level: 1, name: 'Variation study' })).toBeDefined();
+});

website/src/app/page.tsx

@@ -1,7 +1,7 @@
 export default function Home() {
     return (
         <main className='flex min-h-screen flex-col items-center justify-between p-24'>
-            <div>Variation study</div>
+            <h1>Variation study</h1>
         </main>
     );
 }

website/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        environment: 'jsdom',
+    },
+});