Drop support for karma and assume all projects will use vitest for tests

Author: acelaya

README.md

@@ -13,7 +13,7 @@ This project assumes our standard tech stack for frontend projects:
 - [Gulp](https://gulpjs.com) for running tasks [1]
 - [Rollup](https://rollupjs.org/guide/en/) for building JavaScript bundles
 - [Sass](https://sass-lang.com) for authoring styles
-- [Karma](https://karma-runner.github.io/latest/index.html) for running tests
+- [Vitest](https://vitest.dev/) for running tests
 
 [1] Gulp is not required as the task runner, but is how most of our projects
 are currently set up.
@@ -24,9 +24,9 @@ The typical structure of a Hypothesis frontend project looks like:
 
 ```sh
 gulpfile.mjs  # Gulp tasks
+vitest.config.js  # Vitest config file
 
 src/  # Source files ("$PROJECT_NAME/static/scripts" in Python projects)
-  karma.config.js  # Karma config file
   tests/
     bootstrap.js  # JS module that configures test environment
 
@@ -67,7 +67,7 @@ gulp.task('watch-css', () => gulp.watch('src/**/*.scss', 'build-css'));
 gulp.task('watch', gulp.parallel('watch-js', 'watch-css'));
 gulp.task('test', () => runTests({
   bootstrapFile: 'src/tests/bootstrap.js',
-  karmaConfig: 'src/karma.config.js',
+  vitestConfig: 'vitest.config.js',
   rollupConfig: 'rollup-tests.config.mjs',
   testsPattern: '**/*-test.js',
 });
@@ -100,14 +100,14 @@ apps to serve static assets.
 ### Running tests
 
 `runTests(config)` - Build a JavaScript bundle of tests from a set of input files
-and run them in Karma.
+and run them in Vitest.
 
 The test bundle is created by first finding all test files that match the
 `testsPattern` argument and generating an entry point,
 `build/scripts/test-inputs.js`, which imports all of the test files. The
 bundle is then built by passing the config specified by `rollupConfig` to
-Rollup. Once the bundle has been generated, Karma is started using the config
-file specified by `karmaConfig`, which should load the test bundle.
+Rollup. Once the bundle has been generated, Vitest is started using the config
+file specified by `vitestConfig`, which should load the test bundle.
 
 This command supports filtering which tests are run
 by using the `--grep <file pattern>` CLI argument. If the `--live` CLI flag is

lib/tests.js

@@ -8,14 +8,13 @@ import log from 'fancy-log';
 import { buildJS, watchJS } from './rollup.js';
 
 /**
- * Build a bundle of tests and run them using Karma.
+ * Build a bundle of tests and run them using Vitest.
  *
  * @param {object} options
  *   @param {string} options.bootstrapFile - Entry point for the test bundle that initializes the environment
  *   @param {string} options.rollupConfig - Rollup config that generates the test bundle using
  *     `${outputDir}/test-inputs.js` as an entry point
- *   @param {string} [options.karmaConfig] - Karma config file. Will use karma to run tests
- *   @param {string} [options.vitestConfig] - Vitest config file. Will use vitest to run tests
+ *   @param {string} options.vitestConfig - Vitest config file.
  *   @param {string} options.outputDir - Directory in which to generate test bundle. Defaults to
  *     `build/scripts`
  *   @param {string} options.testsPattern - Minimatch pattern that specifies which test files to
@@ -26,7 +25,6 @@ export async function runTests({
   bootstrapFile,
   rollupConfig,
   outputDir = 'build/scripts',
-  karmaConfig,
   vitestConfig,
   testsPattern,
 }) {
@@ -67,43 +65,14 @@ export async function runTests({
     await watchJS(rollupConfig);
   }
 
-  if (karmaConfig) {
-    // Run the tests with karma.
-    log('Starting Karma...');
-    const { default: karma } = await import('karma');
-    const parsedConfig = await karma.config.parseConfig(
-      path.resolve(karmaConfig),
-      { singleRun },
-    );
-
-    return new Promise((resolve, reject) => {
-      new karma.Server(parsedConfig, exitCode => {
-        if (exitCode === 0) {
-          resolve();
-        } else {
-          reject(new Error(`Karma run failed with status ${exitCode}`));
-        }
-      }).start();
-
-      process.on('SIGINT', () => {
-        // Give Karma a chance to handle SIGINT and cleanup, but forcibly
-        // exit if it takes too long.
-        setTimeout(() => {
-          resolve();
-          process.exit(1);
-        }, 5000);
-      });
-    });
-  } else if (vitestConfig) {
-    // Run the tests with vitest. Karma takes precedence if both are defined
-    log('Starting vitest...');
-    const [{ startVitest }, vitestOptions] = await Promise.all([
-      import('vitest/node'),
-      import(path.resolve(vitestConfig)),
-    ]);
-    await startVitest('test', [], {
-      watch: live,
-      ...vitestOptions,
-    });
-  }
+  // Run the tests with vitest
+  log('Starting vitest...');
+  const [{ startVitest }, vitestOptions] = await Promise.all([
+    import('vitest/node'),
+    import(path.resolve(vitestConfig)),
+  ]);
+  await startVitest('test', [], {
+    watch: live,
+    ...vitestOptions,
+  });
 }

package.json

@@ -14,13 +14,11 @@
   "devDependencies": {
     "@types/fancy-log": "^2.0.0",
     "@types/glob": "^8.0.0",
-    "@types/karma": "^6.3.1",
     "@types/node": "^22.0.0",
     "@types/sass": "^1.16.1",
     "@types/tailwindcss": "^3.0.2",
     "autoprefixer": "^10.3.7",
     "eslint": "^9.23.0",
-    "karma": "^6.3.4",
     "postcss": "^8.3.9",
     "prettier": "^3.0.0",
     "rollup": "^4.0.2",
@@ -36,7 +34,6 @@
   },
   "peerDependencies": {
     "autoprefixer": "^10.3.7",
-    "karma": "^6.3.4",
     "postcss": "^8.3.9",
     "rollup": "^4.0.2",
     "sass": "^1.43.2",
@@ -47,9 +44,6 @@
     "autoprefixer": {
       "optional": true
     },
-    "karma": {
-      "optional": true
-    },
     "postcss": {
       "optional": true
     },
@@ -58,9 +52,6 @@
     },
     "tailwindcss": {
       "optional": true
-    },
-    "vitest": {
-      "optional": true
     }
   },
   "prettier": {