Migrate frontend tests from karma to vitest

Author: acelaya

.github/workflows/frontend.yml

@@ -14,7 +14,7 @@ jobs:
         path: node_modules
         key: ${{ runner.os }}-node_modules-${{ hashFiles('yarn.lock') }}
     - name: Install
-      run: yarn install --frozen-lockfile
+      run: yarn install --frozen-lockfile && yarn playwright install chromium
     - name: Lint
       run: make frontend-lint
     - name: Test

frontend.mk

@@ -21,6 +21,7 @@ build/manifest.json: node_modules/.uptodate
 node_modules/.uptodate: package.json yarn.lock
 	@echo installing javascript dependencies
 	@yarn install
+	@yarn playwright install chromium
 	@touch $@
 
 # Make some of the targets from Makefile depend on manifest.json.

gulpfile.js

@@ -57,7 +57,7 @@ gulp.task(
   gulp.parallel('build-css', () =>
     runTests({
       bootstrapFile: 'lms/static/scripts/bootstrap.js',
-      karmaConfig: 'lms/static/scripts/karma.config.cjs',
+      vitestConfig: 'vitest.config.js',
       rollupConfig: 'rollup-tests.config.js',
       testsPattern: 'lms/static/scripts/**/*-test.js',
     }),

lms/static/scripts/bootstrap.js

@@ -1,38 +1,20 @@
 import { unmountAll } from '@hypothesis/frontend-testing';
+import { assert } from 'chai';
 import { configure } from 'enzyme';
 import { Adapter } from 'enzyme-adapter-preact-pure';
 import 'preact/debug';
+import sinon from 'sinon';
 
 // Expose sinon assertions.
 sinon.assert.expose(assert, { prefix: null });
 
+// Expose these globally
+globalThis.assert = assert;
+globalThis.sinon = sinon;
+globalThis.context ??= globalThis.describe;
+
 // Configure Enzyme for UI tests.
 configure({ adapter: new Adapter() });
 afterEach(() => {
   unmountAll();
 });
-
-// Ensure that uncaught exceptions between tests result in the tests failing.
-// This works around an issue with mocha / karma-mocha, see
-// https://github.com/hypothesis/client/issues/2249.
-let pendingError = null;
-let pendingErrorNotice = null;
-
-/* istanbul ignore next */
-window.addEventListener('error', event => {
-  pendingError = event.error;
-  pendingErrorNotice = 'An uncaught exception was thrown between tests';
-});
-/* istanbul ignore next */
-window.addEventListener('unhandledrejection', event => {
-  pendingError = event.reason;
-  pendingErrorNotice = 'An uncaught promise rejection occurred between tests';
-});
-
-afterEach(() => {
-  /* istanbul ignore if */
-  if (pendingError) {
-    console.error(pendingErrorNotice);
-    throw pendingError;
-  }
-});

lms/static/scripts/karma.config.cjs

@@ -54,7 +54,7 @@ describe('Server', () => {
   let listener;
   let receiveMessage;
 
-  beforeEach('set up the test server', () => {
+  beforeEach(() => {
     // The test server normally runs on http://localhost:9876, but may be
     // on a higher port if multiple instances are running.
     // Use window.location.origin to be safe.
@@ -69,11 +69,11 @@ describe('Server', () => {
     server.register('registeredMethodErrorName', registeredMethodError);
   });
 
-  afterEach('tear down the test server', () => {
+  afterEach(() => {
     server.off();
   });
 
-  beforeEach('listen for JSON-RPC responses', () => {
+  beforeEach(() => {
     receiveMessage = sinon.stub();
 
     listener = event => {
@@ -91,7 +91,7 @@ describe('Server', () => {
     window.addEventListener('message', listener);
   });
 
-  afterEach('tear down the JSON-RPC response listener', () => {
+  afterEach(() => {
     window.removeEventListener('message', listener);
   });
 

lms/static/scripts/postmessage_json_rpc/test/server-test.js

@@ -19,7 +19,6 @@
     // Tests and test infrastructure
     "**/test/*.js",
     "bootstrap.js",
-    "karma.config.js",
     "test-util/*.js"
   ]
 }

lms/static/scripts/tsconfig.json

@@ -25,7 +25,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
-    "@hypothesis/frontend-build": "^3.0.0",
+    "@hypothesis/frontend-build": "^3.2.1",
     "@hypothesis/frontend-shared": "^9.3.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -38,7 +38,6 @@
     "classnames": "^2.5.1",
     "focus-visible": "^5.2.1",
     "gulp": "^5.0.0",
-    "karma-chrome-launcher": "^3.2.0",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.47",
     "preact": "^10.25.1",
@@ -49,10 +48,12 @@
     "wouter-preact": "^3.5.1"
   },
   "devDependencies": {
-    "@hypothesis/frontend-testing": "^1.5.0",
+    "@hypothesis/frontend-testing": "^1.6.0",
     "@types/gapi": "^0.0.47",
     "@types/google.accounts": "^0.0.15",
     "@types/google.picker": "^0.0.50",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-istanbul": "^3.1.2",
     "axe-core": "^4.10.3",
     "babel-plugin-istanbul": "^7.0.0",
     "babel-plugin-mockable-imports": "^2.0.1",
@@ -67,19 +68,13 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^15.11.0",
-    "karma": "^6.4.4",
-    "karma-chai": "^0.1.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.0.4",
-    "karma-sinon": "^1.0.5",
-    "karma-source-map-support": "^1.4.0",
-    "mocha": "^10.2.0",
     "navigation-api-types": "^0.5.1",
+    "playwright": "^1.52.0",
     "prettier": "3.4.2",
     "sinon": "^19.0.2",
     "typescript": "^5.2.2",
-    "typescript-eslint": "^8.29.0"
+    "typescript-eslint": "^8.29.0",
+    "vitest": "^3.1.2"
   },
   "prettier": {
     "arrowParens": "avoid",

package.json

@@ -75,7 +75,20 @@ export default {
         [
           'babel-plugin-istanbul',
           {
-            exclude: ['**/test/**/*.js', '**/test-util/**'],
+            // This needs to match the value set in coverage.exclude in vitest.config.js
+            exclude: [
+              '**/node_modules/**',
+              '**/test/**/*.js',
+              '**/test-util/**',
+            ],
+
+            // These two configuration options needed to match the values that
+            // vitest sets internally, so that they pick the coverage
+            // instrumentation generated by babel-plugin-istanbul instead of
+            // trying to generate their own.
+            // See https://github.com/vitest-dev/vitest/discussions/7841#discussioncomment-12855608
+            coverageGlobalScope: 'globalThis',
+            coverageVariable: '__VITEST_COVERAGE__',
           },
         ],
       ],

rollup-tests.config.js

@@ -0,0 +1,42 @@
+import { SummaryReporter } from '@hypothesis/frontend-testing/vitest';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    reporters: [new SummaryReporter()],
+
+    browser: {
+      provider: 'playwright',
+      enabled: true,
+      headless: true,
+      screenshotFailures: false,
+      instances: [{ browser: 'chromium' }],
+      viewport: { width: 1024, height: 768 },
+    },
+
+    // CSS bundles, relied upon by accessibility tests (eg. for color-contrast
+    // checks).
+    setupFiles: [
+      // TODO List dynamically
+      './build/styles/canvas_pages.css',
+      './build/styles/frontend_apps.css',
+      './build/styles/lms.css',
+      './build/styles/moodle_pages.css',
+      './build/styles/ui-playground.css',
+    ],
+    include: [
+      // Test bundle
+      './build/scripts/tests.bundle.js',
+    ],
+
+    coverage: {
+      enabled: true,
+      provider: 'istanbul',
+      reportsDirectory: './coverage',
+      reporter: ['json', 'html'],
+      include: ['lms/static/scripts/frontend_apps/**/*.{ts,tsx}', '!**/*.d.ts'],
+      exclude: ['**/node_modules/**', '**/test/**/*.js', '**/test-util/**'],
+    },
+  },
+});