Fix vitest config (#43)

## Why is this change necessary?
Vitest was not behaving as expected. E2E commands were running unit
tests. the "setup files" were being executed for each file, not once
globally


 ## How does this change address the issue?
switches to using more explicit include/exclude for vitest, instead of
the `--dir` flag.
switches to using the globalSetup for the E2E tests

Switches to using some actual playwright calls in the E2E tests


 ## What side effects does this change have?
none


 ## How is this change tested?
downstream repo with docker backend, and with exe backend


 ## Other
started preparing for Nuxt v4, and disabled devtools and telemetry in
test mode

Author: ejfine

template/frontend/nuxt.config.ts.jinja

@@ -2,7 +2,11 @@
 import { defineNuxtConfig } from "nuxt/config";
 export default defineNuxtConfig({
   compatibilityDate: "2024-11-01",
-  devtools: { enabled: true },
+  future: {
+    compatibilityVersion: 4,
+  },
+  devtools: { enabled: process.env.NODE_ENV !== "test" },
+  telemetry: process.env.NODE_ENV !== "test",
   // the conditional modules added in by the template make it complicated to format consistently...at least with only 3 'always included' modules
   // prettier-ignore
   modules: [

template/frontend/package.json.jinja

@@ -12,17 +12,16 @@
     "generate": "pnpm run type-check && nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare && pnpm exec playwright-core install --only-shell chromium-headless-shell",
-    "test-unit": "vitest --dir tests/unit --run --coverage",
-    "test-unit:watch": "vitest --dir tests/unit",
-    "test-compiled": "vitest --test-timeout=15000 --dir tests/compiled --run",
-    "test-e2e": "{% endraw %}{% if not deploy_as_executable %}{% raw %}docker compose --file=../docker-compose.yaml build && dotenv -v USE_DOCKER_COMPOSE_FOR_VITEST_E2E=1{% endraw %}{% else %}{% raw %}dotenv -v USE_BUILT_BACKEND_FOR_VITEST_E2E=1{% endraw %}{% endif %}{% raw %} -- vitest --test-timeout=15000 --dir tests/e2e --run",
-    "test-compiled:watch": "vitest --dir tests/compiled"{% endraw %}{% if frontend_uses_graphql %}{% raw %},
+    "test-unit": "vitest --exclude=\"tests/e2e/**\" --exclude=\"tests/compiled/**\" --run --coverage",
+    "test-unit:watch": "vitest --exclude=\"tests/e2e/**\" --exclude=\"tests/compiled/**\"",
+    "test-compiled": "vitest --exclude=\"tests/e2e/**\" --exclude=\"tests/unit/**\" --test-timeout=15000 --run",
+    "test-e2e": "{% endraw %}{% if not deploy_as_executable %}{% raw %}docker compose --file=../docker-compose.yaml build && dotenv -v USE_DOCKER_COMPOSE_FOR_VITEST_E2E=1{% endraw %}{% else %}{% raw %}dotenv -v USE_BUILT_BACKEND_FOR_VITEST_E2E=1{% endraw %}{% endif %}{% raw %} -- vitest --exclude=\"tests/unit/**\" --exclude=\"tests/compiled/**\" --test-timeout=15000 --run",
+    "test-compiled:watch": "vitest --exclude=\"tests/e2e/**\" --exclude=\"tests/unit/**\" --test-timeout=15000"{% endraw %}{% if frontend_uses_graphql %}{% raw %},
     "codegen": "graphql-codegen --config codegen.ts"{% endraw %}{% endif %}{% raw %}
   },
   "dependencies": {
     "@nuxt/ui": "{% endraw %}{{ nuxt_ui_version }}{% raw %}",
     "nuxt": "{% endraw %}{{ nuxt_version }}{% raw %}",
-    "typescript": "{% endraw %}{{ typescript_version }}{% raw %}",
     "vue": "{% endraw %}{{ vue_version }}{% raw %}",
     "vue-router": "{% endraw %}{{ vue_router_version }}{% raw %}"
   },
@@ -39,6 +38,7 @@
     "@nuxt/test-utils": "^3.17.2",{% endraw %}{% if frontend_uses_graphql %}{% raw %}
     "@nuxtjs/apollo": "5.0.0-alpha.14",{% endraw %}{% endif %}{% raw %}
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@playwright/test": "^1.52.0",
     "@vitest/coverage-istanbul": "^3.1.3",{% endraw %}{% if frontend_uses_graphql %}{% raw %}
     "@vue/apollo-composable": "^4.2.2",{% endraw %}{% endif %}{% raw %}
     "@vue/devtools-api": "^7.7.2",
@@ -57,6 +57,7 @@
     "playwright-core": "^1.52.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.0.14",
+    "typescript": "{% endraw %}{{ typescript_version }}{% raw %}",
     "vitest": "^3.1.3",
     "vue-eslint-parser": "^10.1.1",
     "vue-tsc": "^2.2.8"

template/frontend/tests/e2e/helpers/playwright.ts

@@ -0,0 +1,8 @@
+import { inject } from "vitest";
+
+export function url(path: string): string {
+  if (!path.startsWith("/")) {
+    path = `/${path}`;
+  }
+  return `${inject("baseUrl")}${path}`;
+}

template/frontend/tests/e2e/index.spec.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "vitest";
-import { getPage, url } from "~/tests/setup/app";
+import { url } from "~/tests/e2e/helpers/playwright";
+import { getPage } from "~/tests/setup/app";
 
 describe("Index page", async () => {
   test("Page displays Hello World", async () => {

template/frontend/tests/setup/app.ts

@@ -1,103 +1,20 @@
-import { execSync, spawn } from "child_process";
-import fs from "fs";
-import path from "path";
 import type { Browser, Page } from "playwright";
 import { chromium } from "playwright";
-import { afterAll, beforeAll } from "vitest";
-
-import { APP_NAME, DEPLOYED_BACKEND_PORT_NUMBER, DEPLOYED_FRONTEND_PORT_NUMBER } from "~/tests/setup/constants";
+import { afterAll, beforeAll, beforeEach } from "vitest";
 
 const isE2E = process.env.USE_DOCKER_COMPOSE_FOR_VITEST_E2E || process.env.USE_BUILT_BACKEND_FOR_VITEST_E2E;
-const isDockerE2E = process.env.USE_DOCKER_COMPOSE_FOR_VITEST_E2E;
-const isBuiltBackendE2E = process.env.USE_BUILT_BACKEND_FOR_VITEST_E2E;
 let browser: Browser;
 let page: Page;
-const executableExtension = process.platform === "win32" ? ".exe" : "";
-const repoRoot = path.resolve(__dirname, "../../../");
-const executablePath = path.resolve(repoRoot, `./backend/dist/${APP_NAME}/${APP_NAME}${executableExtension}`);
-if (isBuiltBackendE2E) {
-  if (!fs.existsSync(executablePath) || !fs.statSync(executablePath).isFile()) {
-    throw new Error(`File not found: ${executablePath}`);
-  }
-}
-export const BASE_URL = `http://127.0.0.1:${
-  isBuiltBackendE2E ? DEPLOYED_BACKEND_PORT_NUMBER : DEPLOYED_FRONTEND_PORT_NUMBER
-}`;
-export function url(path: string): string {
-  if (!path.startsWith("/")) {
-    path = `/${path}`;
-  }
-  return `${BASE_URL}${path}`;
-}
-const healthCheckUrl = `http://127.0.0.1:${
-  isBuiltBackendE2E ? DEPLOYED_BACKEND_PORT_NUMBER.toString() + "/api/healthcheck" : DEPLOYED_FRONTEND_PORT_NUMBER
-}`; // TODO: if there is a backend, check that too, even if it's a docker-compose situation
+
 if (isE2E) {
   beforeAll(async () => {
-    if (isBuiltBackendE2E) {
-      console.log(`Starting app at ${executablePath} ...`);
-      const child = spawn(executablePath, ["--host", "0.0.0.0"], {
-        // TODO: figure out why Github CI pipelines fail without setting all allowed hosts
-        stdio: "inherit",
-      });
-      child.on("close", (code) => {
-        console.log(`Process exited with code ${code}`);
-      });
-    }
-    if (isDockerE2E) {
-      console.log("Starting docker-compose...");
-      execSync("docker compose --file=../docker-compose.yaml up --detach --force-recreate --renew-anon-volumes", {
-        stdio: "inherit",
-      });
-    }
     browser = await chromium.launch(); // headless by default
-    page = await browser.newPage();
-    // Wait for /api/healthcheck to become available
-    const maxAttempts = 10;
-    let attempts = 0;
-    while (attempts < maxAttempts) {
-      try {
-        const res = await fetch(healthCheckUrl);
-        if (res.ok) {
-          break;
-        }
-      } catch {
-        // ignore errors // TODO: make this more specific (e.g., only ignore network errors)
-      }
-      attempts++;
-      console.log(`Waiting for ${healthCheckUrl} to become available... Attempt ${attempts}`);
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    }
-    if (attempts === maxAttempts) {
-      throw new Error(`Timeout waiting for ${healthCheckUrl}`);
-    }
   }, 40 * 1000); // increase timeout to allow application to start
-
+  beforeEach(async () => {
+    page = await browser.newPage();
+  });
   afterAll(async () => {
     await browser.close();
-    if (isBuiltBackendE2E) {
-      console.log("Stopping application...");
-      try {
-        const res = await fetch(`${BASE_URL}/api/shutdown`);
-        if (!res.ok) {
-          throw new Error(`Failed to stop the application: ${res.statusText}`);
-        }
-      } catch (error) {
-        const logFilePath = path.resolve(repoRoot, `./frontend/logs/${APP_NAME}-backend.log`);
-        // sometimes it takes a second for the log file to be fully written to disk
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        if (!fs.existsSync(logFilePath) || !fs.statSync(logFilePath).isFile()) {
-          throw new Error(`Log file not found: ${logFilePath}`, { cause: error });
-        }
-        const logData = fs.readFileSync(logFilePath, "utf-8");
-        console.log("Application logs:\n", logData);
-        throw error;
-      }
-    }
-    if (isDockerE2E) {
-      console.log("Stopping docker-compose...");
-      execSync("docker compose --file=../docker-compose.yaml down", { stdio: "inherit" });
-    }
   }, 40 * 1000); // increase timeout to allow application to stop
 }
 

template/frontend/tests/setup/globalSetup.ts

@@ -0,0 +1,103 @@
+import { execSync, spawn } from "child_process";
+import fs from "fs";
+import path from "path";
+import type { Browser } from "playwright";
+import { chromium } from "playwright";
+import type { TestProject } from "vitest/node";
+import { APP_NAME, DEPLOYED_BACKEND_PORT_NUMBER, DEPLOYED_FRONTEND_PORT_NUMBER } from "~/tests/setup/constants";
+
+const isE2E = process.env.USE_DOCKER_COMPOSE_FOR_VITEST_E2E || process.env.USE_BUILT_BACKEND_FOR_VITEST_E2E;
+const isDockerE2E = process.env.USE_DOCKER_COMPOSE_FOR_VITEST_E2E;
+const isBuiltBackendE2E = process.env.USE_BUILT_BACKEND_FOR_VITEST_E2E;
+let browser: Browser;
+
+const executableExtension = process.platform === "win32" ? ".exe" : "";
+const repoRoot = path.resolve(__dirname, "../../../");
+const executablePath = path.resolve(repoRoot, `./backend/dist/${APP_NAME}/${APP_NAME}${executableExtension}`);
+if (isBuiltBackendE2E) {
+  if (!fs.existsSync(executablePath) || !fs.statSync(executablePath).isFile()) {
+    throw new Error(`File not found: ${executablePath}`);
+  }
+}
+export const BASE_URL = `http://127.0.0.1:${
+  isBuiltBackendE2E ? DEPLOYED_BACKEND_PORT_NUMBER : DEPLOYED_FRONTEND_PORT_NUMBER
+}`;
+const healthCheckUrl = `http://127.0.0.1:${
+  isBuiltBackendE2E ? DEPLOYED_BACKEND_PORT_NUMBER.toString() + "/api/healthcheck" : DEPLOYED_FRONTEND_PORT_NUMBER
+}`; // TODO: if there is a backend, check that too, even if it's a docker-compose situation
+
+export async function setup(project: TestProject) {
+  project.provide("baseUrl", BASE_URL);
+  if (isE2E) {
+    if (isBuiltBackendE2E) {
+      console.log(`Starting app at ${executablePath} ...`);
+      const child = spawn(executablePath, ["--host", "0.0.0.0"], {
+        // TODO: figure out why Github CI pipelines fail without setting all allowed hosts
+        stdio: "inherit",
+      });
+      child.on("close", (code) => {
+        console.log(`Process exited with code ${code}`);
+      });
+    }
+    if (isDockerE2E) {
+      console.log("Starting docker-compose...");
+      execSync("docker compose --file=../docker-compose.yaml up --detach --force-recreate --renew-anon-volumes", {
+        stdio: "inherit",
+      });
+    }
+    browser = await chromium.launch(); // headless by default
+    // Wait for /api/healthcheck to become available
+    const maxAttempts = 10;
+    let attempts = 0;
+    while (attempts < maxAttempts) {
+      try {
+        const res = await fetch(healthCheckUrl);
+        if (res.ok) {
+          break;
+        }
+      } catch {
+        // ignore errors // TODO: make this more specific (e.g., only ignore network errors)
+      }
+      attempts++;
+      console.log(`Waiting for ${healthCheckUrl} to become available... Attempt ${attempts}`);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+    if (attempts === maxAttempts) {
+      throw new Error(`Timeout waiting for ${healthCheckUrl}`);
+    }
+  }
+}
+export async function teardown() {
+  if (isE2E) {
+    await browser.close();
+    if (isBuiltBackendE2E) {
+      console.log("Stopping application...");
+      try {
+        const res = await fetch(`${BASE_URL}/api/shutdown`);
+        if (!res.ok) {
+          throw new Error(`Failed to stop the application: ${res.statusText}`);
+        }
+      } catch (error) {
+        const logFilePath = path.resolve(repoRoot, `./frontend/logs/${APP_NAME}-backend.log`);
+        // sometimes it takes a second for the log file to be fully written to disk
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        if (!fs.existsSync(logFilePath) || !fs.statSync(logFilePath).isFile()) {
+          throw new Error(`Log file not found: ${logFilePath}`, { cause: error });
+        }
+        const logData = fs.readFileSync(logFilePath, "utf-8");
+        console.log("Application logs:\n", logData);
+        throw error;
+      }
+    }
+    if (isDockerE2E) {
+      console.log("Stopping docker-compose...");
+      execSync("docker compose --file=../docker-compose.yaml down", { stdio: "inherit" });
+    }
+  }
+}
+
+declare module "vitest" {
+  export interface ProvidedContext {
+    baseUrl: string;
+  }
+}

template/frontend/vitest.config.ts

@@ -11,6 +11,7 @@ export default defineVitestConfig({
     sequence: {
       shuffle: true,
     },
+    include: ["tests/**/*.spec.ts"],
     coverage: {
       provider: "istanbul",
       reporter: ["text", "json", "html"],
@@ -21,5 +22,6 @@ export default defineVitestConfig({
       exclude: ["**/generated/graphql.ts", "**/codegen.ts", "**/nuxt.config.ts", ...coverageConfigDefaults.exclude],
     },
     setupFiles: ["./tests/setup/faker.ts", "./tests/setup/app.ts"],
+    globalSetup: "./tests/setup/globalSetup.ts",
   },
 });