Set-up to run tests with vitest browser mode

Author: acelaya

.github/workflows/continuous-integration.yml

@@ -16,15 +16,15 @@ jobs:
         path: node_modules
         key: ${{ runner.os }}-node_modules-${{ hashFiles('yarn.lock') }}
     - name: Install
-      run: yarn install --immutable
+      run: yarn install --immutable && yarn playwright install
     - name: Format
       run: yarn checkformatting
     - name: Lint
       run: yarn lint
     - name: Typecheck
       run: yarn typecheck
     - name: Test
-      run: yarn test
+      run: yarn test:vitest
     - name: Upload coverage to Codecov
       uses: codecov/codecov-action@v4
       with:

Makefile

@@ -65,4 +65,5 @@ build: node_modules/.uptodate
 
 node_modules/.uptodate: package.json yarn.lock
 	yarn install
+	yarn playwright install
 	@touch $@

gulpfile.js

@@ -60,3 +60,17 @@ gulp.task(
     }),
   ),
 );
+
+// Some (eg. a11y) tests rely on CSS bundles. We assume that JS will always take
+// longer to build than CSS, so build in parallel.
+gulp.task(
+  'test:vitest',
+  gulp.parallel('build-test-css', () =>
+    runTests({
+      bootstrapFile: 'test/bootstrap.js',
+      rollupConfig: 'rollup-tests.config.js',
+      testsPattern: 'src/**/*-test.js',
+      vitestConfig: './vitest.config.js',
+    }),
+  ),
+);

package.json

@@ -10,7 +10,7 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.18.6",
-    "@hypothesis/frontend-build": "^3.0.0",
+    "@hypothesis/frontend-build": "^3.2.1",
     "@hypothesis/frontend-testing": "^1.4.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -19,6 +19,8 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-virtual": "^3.0.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-istanbul": "^3.1.1",
     "autoprefixer": "^10.3.7",
     "axe-core": "^4.0.0",
     "babel-plugin-istanbul": "^7.0.0",
@@ -46,6 +48,7 @@
     "karma-source-map-support": "^1.4.0",
     "mocha": "11.1.0",
     "mustache": "^4.2.0",
+    "playwright": "^1.51.1",
     "postcss": "^8.3.9",
     "preact": "^10.25.1",
     "prettier": "^3.0.0",
@@ -57,6 +60,7 @@
     "tailwindcss": "3.4.17",
     "typescript": "^5.0.2",
     "typescript-eslint": "^8.10.0",
+    "vitest": "^3.1.1",
     "yalc": "^1.0.0-pre.50"
   },
   "peerDependencies": {
@@ -71,6 +75,7 @@
     "checkformatting": "prettier --cache --check '**/*.{js,scss,ts,tsx,md}'",
     "format": "prettier --cache --list-different --write '**/*.{js,scss,ts,tsx,md}'",
     "test": "gulp test",
+    "test:vitest": "gulp test:vitest",
     "push": "yarn build && yalc push"
   },
   "prettier": {

rollup-tests.config.js

@@ -66,13 +66,23 @@ export default {
         [
           'babel-plugin-istanbul',
           {
+            // This needs to match the value set in coverage.exclude in vitest.config.js
             exclude: [
+              '**/node_modules/**',
               '**/test/**/*.js',
               '**/test-util/**',
               'src/components/icons/**/*.ts*',
               'src/pattern-library/**/*.js',
               'src/pattern-library/**/*.ts*',
             ],
+
+            // 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__',
           },
         ],
       ],

test/bootstrap.js

@@ -12,31 +12,10 @@ sinon.assert.expose(assert, { prefix: null });
 // karma-sinon plugins
 globalThis.assert = assert;
 globalThis.sinon = sinon;
+globalThis.context = 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;
-
-window.addEventListener('error', event => {
-  pendingError = event.error;
-  pendingErrorNotice = 'An uncaught exception was thrown between tests';
-});
-window.addEventListener('unhandledrejection', event => {
-  pendingError = event.reason;
-  pendingErrorNotice = 'An uncaught promise rejection occurred between tests';
-});
-
-afterEach(() => {
-  if (pendingError) {
-    console.error(pendingErrorNotice);
-    throw pendingError;
-  }
-});

vitest.config.js

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    browser: {
+      provider: 'playwright',
+      enabled: true,
+      headless: true,
+      screenshotFailures: false,
+      instances: [{ browser: 'chromium' }],
+    },
+    globals: true,
+
+    // CSS bundle relied upon by accessibility tests (eg. for color-contrast
+    // checks).
+    setupFiles: './build/styles/test.css',
+    include: [
+      // Test bundle
+      './build/scripts/tests.bundle.js',
+    ],
+
+    coverage: {
+      enabled: true,
+      provider: 'istanbul',
+      reportsDirectory: './coverage',
+      reporter: ['json', 'clover', 'html'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        '**/node_modules/**',
+        '**/test/**/*.js',
+        '**/test-util/**',
+        'src/components/icons/**/*.ts*',
+        'src/pattern-library/**/*.js',
+        'src/pattern-library/**/*.ts*',
+      ],
+    },
+  },
+});