test: setup Vitest unit tests

.github/workflows/check.yml

@@ -32,6 +32,9 @@ jobs:
       - name: 🛠️ Generate static site
         run: pnpm generate
 
+      - name: 🧪 Run unit tests
+        run: pnpm test
+
   # run Playwright tests in parallel job to speed up workflow speed
   playwright:
     name: Run Playwright tests
@@ -54,7 +57,7 @@ jobs:
       - name: 📦 Install Playwright system dependencies
         run: pnpm exec playwright install-deps
 
-      - name: 🧪 Run tests
+      - name: 🧪 Run Playwright tests
         run: pnpm test:playwright
 
       # upload report if tests failed for debugging

.gitignore

@@ -27,3 +27,4 @@ logs
 # Tests
 playwright-report
 test-results
+coverage

README.md

@@ -6,7 +6,7 @@ Additional features:
 
 - [nuxt i18n](https://nuxt.com/modules/i18n)
 - [eslint](https://nuxt.com/modules/eslint) and [prettier](https://prettier.io/) setup (also runs pre-commit)
-- [Playwright](https://playwright.dev) for testing
+- Testing using [Vitest](https://vitest.dev) and [Playwright](https://playwright.dev)
 - [Docker](https://www.docker.com) setup
 - GitHub action to check and build code in CI
 
@@ -45,4 +45,20 @@ Locally preview production build:
 pnpm run preview
 ```
 
+## Unit tests
+
+Run unit tests using [Vitest](https://vitest.dev):
+
+```bash
+pnpm run test
+```
+
+## Playwright tests
+
+Run component/integration/e2e tests using [Playwright](https://playwright.dev):
+
+```bash
+pnpm run test:playwright
+```
+
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

eslint.config.mjs

@@ -6,6 +6,6 @@ export default withNuxt([
   // Your custom configs here
   {
     ...playwright.configs["flat/recommended"],
-    files: ["tests/**"],
+    files: ["tests/playwright/**"],
   },
 ]);

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@nuxtjs/i18n", "@nuxt/eslint"],
+  modules: ["@nuxtjs/i18n", "@nuxt/eslint", "@nuxt/test-utils/module"],
   css: ["~/assets/css/main.scss"],
   i18n: {
     lazy: true,

package.json

@@ -8,9 +8,10 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
+    "test": "vitest",
     "test:playwright": "playwright install && playwright test",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint:fix": "pnpm run lint --fix",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "prepare": "simple-git-hooks",
@@ -26,11 +27,14 @@
     "@nuxt/eslint": "~0.3.10",
     "@nuxt/test-utils": "^3.12.1",
     "@playwright/test": "~1.43.1",
+    "@vue/test-utils": "^2.4.5",
     "eslint-plugin-playwright": "^1.6.0",
+    "happy-dom": "^14.7.1",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.76.0",
-    "simple-git-hooks": "^2.11.1"
+    "simple-git-hooks": "^2.11.1",
+    "vitest": "^1.5.3"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

playwright.config.ts

@@ -8,7 +8,7 @@ import { fileURLToPath } from "node:url";
  * @see https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig<ConfigOptions>({
-  testDir: "./tests",
+  testDir: "./tests/playwright",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   reporter: [["html", { open: "never" }]],