fix: use concurrently to give correct watch behaviour (#380)

Vitest has projects which are a great way to organise test config, but
watchTriggerPatterns is global, not per project. If you want a single
project to behave like e2e tests (i.e. run if the source changes)
and another like unit tests (i.e. run if a file they're importing
changes), it doesn't work.

Concurrently fixes this because it handles running the projects and they
handle (separately) which tests should run.

Author: ojeytonwilliams

package.json

@@ -41,6 +41,7 @@
     "@types/chai": "^4.3.20",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
+    "concurrently": "^9.2.0",
     "eslint": "9.30.1",
     "eslint-config-prettier": "10.1.5",
     "eslint-config-xo": "0.46.0",
@@ -54,7 +55,7 @@
     "ts-loader": "9.5.2",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.31.0",
-    "vitest": "^3.1.4",
+    "vitest": "^3.2.4",
     "webpack": "5.99.9",
     "webpack-cli": "5.1.4"
   },
@@ -93,6 +94,9 @@
     "lint": "eslint . --max-warnings 0 && prettier --check . && tsc --build",
     "format": "prettier --write .",
     "test": "vitest",
+    "test:watch": "concurrently --prefix none \"pnpm test:unit --watch\" \"pnpm test:integration --watch\"",
+    "test:unit": "vitest --config vitest.unit.config.mjs",
+    "test:integration": "vitest --config vitest.integration.config.mjs",
     "prepare": "husky install",
     "prepublishOnly": "pnpm clean:build && pnpm build",
     "webpack": "webpack"

pnpm-lock.yaml

@@ -1,32 +1,7 @@
-import { configDefaults, defineConfig } from "vitest/config";
-
-const integrationTests = [
-  "./packages/main/integration-tests/index.test.ts",
-  "./packages/main/integration-tests/timeout.test.ts",
-];
+import { defineConfig } from "vitest/config";
 
 export default defineConfig({
-  assetsInclude: ["**/*.py"],
   test: {
-    environment: "puppeteer",
-    exclude: [...configDefaults.exclude, "packages/*/build", "dist"],
-    globals: true, // TODO: remove this OR include vitest types
-    globalSetup: "vitest-environment-puppeteer/global-init",
-    watchTriggerPatterns: [
-      {
-        pattern: /packages.*\.ts$/,
-        testsToRun: (id) => {
-          // If the changed file is a test, it's the only test that could be
-          // affected.
-          const isTestFile = id.endsWith(".test.ts");
-          if (isTestFile) return id;
-
-          // Otherwise, if there is a test file, this is it:
-          const testFile = id.slice(0, -3) + ".test.ts";
-          // In principle any source change could impact the integration tests
-          return [...integrationTests, testFile];
-        },
-      },
-    ],
+    projects: ["./vitest.integration.config.mjs", "./vitest.unit.config.mjs"],
   },
 });

vitest.config.mjs

@@ -0,0 +1,26 @@
+import { configDefaults, defineConfig } from "vitest/config";
+
+const integrationTests = [
+  "./packages/tests/integration-tests/index.test.ts",
+  "./packages/tests/integration-tests/timeout.test.ts",
+];
+
+export default defineConfig({
+  test: {
+    watchTriggerPatterns: [
+      {
+        pattern: /packages\/.*\/.*\.ts$/,
+        testsToRun: () => {
+          // Any source change could impact the integration tests
+          return integrationTests;
+        },
+      },
+    ],
+    name: "integration",
+    globals: true, // TODO: remove this OR include vitest types
+    environment: "puppeteer",
+    include: integrationTests,
+    exclude: [...configDefaults.exclude, "packages/*/build", "dist"],
+    globalSetup: "vitest-environment-puppeteer/global-init",
+  },
+});

vitest.integration.config.mjs

@@ -0,0 +1,16 @@
+import { configDefaults, defineConfig } from "vitest/config";
+
+export default defineConfig({
+  assetsInclude: ["**/*.py"],
+  test: {
+    name: "unit",
+    globals: true, // TODO: remove this OR include vitest types
+    include: ["**/*.test.ts", "**/*.test.tsx"],
+    exclude: [
+      ...configDefaults.exclude,
+      "packages/*/build",
+      "dist",
+      "packages/tests/integration-tests",
+    ],
+  },
+});