Convert test suite from Karma/Chai/Mocha to Vitest with Playwright

[Copilot]

Overview

This PR modernizes the test infrastructure by replacing Karma, Chai, and Mocha with Vitest in browser mode using Playwright. This change simplifies the testing setup, eliminates the need for a separate build step before testing (since Vitest can run TypeScript directly), and aligns with modern JavaScript testing practices.

Changes

Test Infrastructure

• Removed dependencies: karma, karma-chai, karma-chrome-launcher, karma-mocha, karma-mocha-reporter, mocha, chai, chromium
• Added dependencies: vitest@^3.2.4, @vitest/browser, playwright
• Test runner: Changed from Karma to Vitest with browser mode
• Browser: Using Playwright's chromium in headless mode
• Assertions: Migrated from Chai's assert API to Vitest's expect API

Configuration

Created vitest.config.js to replace test/karma.config.js:

• Browser mode with Playwright provider running chromium headless
• Custom middleware plugin to handle HTTP test endpoints (migrated from Karma's middleware)
• Configured test server on port 9876 for consistency

Test Files

• Renamed test/test.js → test/test.spec.js (follows vitest naming conventions)
• Updated imports to use vitest functions: describe, it, beforeEach, afterEach, expect
• Changed to import from TypeScript source (../src/index.ts) instead of built dist files
• Converted all test assertions from Chai to Vitest:
  • assert.ok() → expect().toBe(true) / expect().toBeTruthy()
  • assert.equal() → expect().toBe()
  • assert.deepEqual() → expect().toEqual()
  • assert.instanceOf() → expect().toBeInstanceOf()
  • assert.isNull() → expect().toBeNull()
  • assert.isFalse() → expect().toBe(false)
  • assert.match() → expect().toMatch()
• Converted all tests from done() callbacks to promises (required by Vitest)

Build Scripts

Updated package.json:

• Removed pretest script - no longer needed since Vitest runs TypeScript directly
• Changed test script from karma start test/karma.config.js to vitest run
• Updated lint script to use wildcard test/*.js for better flexibility

Linting

Updated .eslintrc.json:

• Removed mocha: true environment setting
• Removed assert and remoteForm globals (no longer needed)
• Added rules to support vitest imports and test file naming

CI/CD Workflows

Updated GitHub Actions workflows:

• nodejs.yml: Updated to use Node 24, added npx playwright install chromium step
• publish.yml: Changed to Node 24, added npx playwright install chromium step
• Both workflows now use latest actions/checkout@v4 and actions/setup-node@v4

Git Configuration

• Added test/__screenshots__ to .gitignore to exclude Vitest browser mode screenshot artifacts

Testing

All 9 tests pass successfully:

• ✅ submits the form with fetch
• ✅ installs remoteForm on form reference
• ✅ server failure scenario
• ✅ chained handlers
• ✅ exception in js handlers results in form submitting normally
• ✅ GET form serializes data to URL
• ✅ GET form serializes data to URL with existing query
• ✅ does not submit the request if default is already prevented
• ✅ overwrites form method with buttons formmethod

Linting and builds also pass without errors.

Running Tests Locally

To run tests locally, Playwright browsers must be installed first:

npx playwright install chromium
npm test

The CI workflows automatically install the necessary browsers before running tests.

Original prompt

This package currently uses Karma, chai and mocha to run tests within a browser. Convert it to use Vitest in browser mode with Playwright. Install vitest version ^3.2.4. Update test files to import describe/it/etc from vitest and use assertion helpers from vitest. Remove the pretest build script since vitest can run TypeScript directly. Run the tests with npm test and verify they pass. Remove all references to karma/chai/mocha.

For the vitest config, only use chromium. Don't specify executablePath, assume it's installed correctly. Also always use headless mode.

Also update all github workflows to run with Node 24 by default, and include Node 22 in matrix runs (only if matrix is already configured, don't add it). Drop older versions. Update actions to use the latest version of actions/setup-node and actions/checkout. Add a step before running tests in CI which runs npx playwright install chromium.

Ensure lint and tests both pass. Remove any references to karma/mocha/chai from the lint config.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[dgreif]

@copilot please add test/__screenshots__ to the gitignore

[Copilot]

@copilot please add test/__screenshots__ to the gitignore

Added test/screenshots to .gitignore in commit 6b4e2cf.

[Copilot]

Pull Request Overview

This PR modernizes the test infrastructure by migrating from the legacy Karma/Chai/Mocha testing stack to Vitest with browser mode and Playwright. The change simplifies the testing setup, eliminates build dependencies for tests, and aligns with modern JavaScript testing practices.

Key changes:

• Replaced Karma/Chai/Mocha with Vitest and Playwright for browser testing
• Updated test files to use Vitest's API and import from TypeScript source files directly
• Modified CI workflows to use Node 24 and install Playwright browsers

Reviewed Changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
vitest.config.js	New Vitest configuration replacing karma.config.js with browser mode and middleware
test/test.spec.js	New test file with Vitest API and promise-based assertions
test/test.js	Removed original Karma/Mocha test file
package.json	Updated dependencies and scripts for Vitest
.github/workflows/publish.yml	Updated to Node 24 with Playwright installation
.github/workflows/nodejs.yml	Updated to Node 24 with Playwright installation
.eslintrc.json	Removed Mocha-specific configuration and globals

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[bteng22]

Nice! pat