Replace Pleasantest with Vitest browser mode

.github/workflows/ci.yml

@@ -73,12 +73,7 @@ jobs:
  run: npm run build-storybook
 
  test:
- # Puppeteer stopped working on the latest ubuntu version
- # We use Puppeteer for our tests in Pleasantest.
- # For now we've downgraded to a version of Ubuntu that works.
- # In the future we'll likely need to fix this in the Pleasantest repo or
- # move to a different testing solution
- runs-on: ubuntu-22.04
+ runs-on: ubuntu-latest
  steps:
  - name: Checkout
  uses: actions/checkout@v6.1.0
@@ -94,6 +89,17 @@ jobs:
  restore-keys: ${{ runner.os }}-node-
  - name: Install Dependencies
  run: npm ci
+ # Chromium is not in the npm install: Playwright downloads browsers
+ # separately, into a cache keyed by Playwright version.
+ - name: Cache Playwright browsers
+ uses: actions/cache@v5.1.0
+ with:
+ path: ~/.cache/ms-playwright
+ key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+ # Skips the download on a cache hit, but still installs the system
+ # libraries Chromium needs, which are not cached.
+ - name: Install Playwright Chromium
+ run: npx playwright install --with-deps chromium
  - name: Run Preprocess
  run: npm run preprocess
  - name: Run Build (necessary for including css file in tests)

.gitignore

@@ -22,3 +22,7 @@ npm-debug.log
 
 # Cypress artifacts
 /cypress/screenshots
+
+# Screenshots and attachments Vitest browser mode writes when a test fails
+__screenshots__
+.vitest-attachments

CONTRIBUTING.md

@@ -19,9 +19,10 @@ You can run `npm run validate` to run all of the checks that will be run in CI (
 You can also run checks individually:
 
 - **Linters/formatters**: `npm run lint` (runs Prettier, ESLint, and Stylelint)
-- **Tests**: `npm run test` (runs Jest tests)
- You can also run `npm run test:watch` to run Jest in watch mode
+- **Tests**: `npm run test` (runs Vitest tests)
+ You can also run `npm run test:watch` to run Vitest in watch mode
  Note that tests will fail if you have not built the project. If you see tests failing with errors like "file not found in `dist` folder", try running `npm run build` and then re-run the tests.
+ Browser tests need Chromium, which Playwright downloads separately from `npm install`: run `npx playwright install chromium` once.
 - **Typechecking** `npm run type` (runs TypeScript)
  You can also run `npm run type:watch` to run TypeScript in watch mode
 

babel.config.js

@@ -1,9 +1,6 @@
-module.exports = function babelConfig(api) {
- const isTest = api.env('test');
- return {
- presets: [
- '@babel/preset-typescript',
- ['@babel/preset-env', isTest ? { modules: 'commonjs' } : {}],
- ],
- };
+// Only the Rollup library build runs Babel (see gulpfile.js/tasks/build-scripts.js).
+// Tests used to come through here too, under Jest, which needed the output
+// transformed to CommonJS; Vitest transforms with Vite instead.
+module.exports = {
+ presets: ['@babel/preset-typescript', '@babel/preset-env'],
 };

eslint.config.mjs

@@ -26,7 +26,16 @@ export default [
  // directory, which finds no tsconfig. Point the type-aware rules at ours.
  files: ['**/*.{ts,tsx,mts,cts}'],
  languageOptions: {
- parserOptions: { tsconfigRootDir: import.meta.dirname },
+ parserOptions: {
+ tsconfigRootDir: import.meta.dirname,
+ projectService: {
+ // Our tsconfig covers `src`, because that is what ships. These files
+ // configure the tooling around it and belong to no project, so the type
+ // aware rules read them through an inferred one instead of failing to
+ // find them at all.
+ allowDefaultProject: ['vitest.config.mts', 'vitest.setup.*.ts'],
+ },
+ },
  },
  },