chore(test): modernize test infrastructure from Karma/Jasmine to Vitest

- Replace Karma + Jasmine + PhantomJS with Vitest + jsdom for unit tests
- Add Puppeteer-based browser tests for real coordinate calculations
- Migrate tests to React Testing Library patterns
- Update React dev dependency to v18
- Add GitHub Actions CI workflow
- Remove deprecated karma configs and specs directory
- Add CLAUDE.md with project documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: STRML

.github/workflows/ci.yml

@@ -0,0 +1,88 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18, 20, 22]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run unit tests
+        run: yarn test
+
+      - name: Build
+        run: yarn build
+
+  test-browser:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Run browser tests
+        run: yarn test:browser
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Flow check
+        run: yarn flow
+
+      - name: TypeScript check
+        run: npx tsc -p typings

CLAUDE.md

@@ -0,0 +1,84 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build Commands
+
+**This project uses Yarn, not npm.** Always use `yarn` for package management.
+
+This project uses Make for builds. Key commands:
+
+- `make build` - Full build (cleans, then builds CJS and web bundles)
+- `make lint` - Runs Flow type checker, ESLint, and TypeScript type checking on typings
+- `make test` - Runs unit tests via Vitest
+- `make test-browser` - Runs browser tests via Puppeteer (requires build first)
+- `make test-all` - Runs both unit and browser tests
+- `make dev` - Starts webpack dev server with example page
+
+Yarn scripts:
+- `yarn test` - Run unit tests (jsdom environment)
+- `yarn test:watch` - Run unit tests in watch mode
+- `yarn test:browser` - Build and run browser tests (Puppeteer)
+- `yarn test:all` - Run all tests
+- `yarn test:coverage` - Run tests with coverage report
+
+## Test Architecture
+
+Tests are split into two categories:
+
+1. **Unit tests** (`test/*.test.{js,jsx}`) - Run in jsdom via Vitest
+   - Fast, no browser required
+   - Test component logic, callbacks, prop handling
+   - Some coordinate-based tests skipped (require real browser)
+
+2. **Browser tests** (`test/browser/*.test.js`) - Run in headless Chrome via Puppeteer
+   - Test actual drag behavior with real coordinate calculations
+   - Test transforms, axis constraints, bounds, scale
+
+## Architecture
+
+### Component Hierarchy
+
+**DraggableCore** (`lib/DraggableCore.js`) - Low-level component that handles raw drag events
+- Maintains minimal internal state (just `dragging`, `lastX`, `lastY`)
+- Manages mouse/touch event binding and cleanup
+- Provides `onStart`, `onDrag`, `onStop` callbacks with position data
+- Use this when you need full control over positioning
+
+**Draggable** (`lib/Draggable.js`) - High-level wrapper around DraggableCore
+- Manages position state, bounds checking, axis constraints
+- Applies CSS transforms or SVG transform attributes
+- Supports controlled (`position` prop) and uncontrolled (`defaultPosition`) modes
+- Adds dragging-related CSS classes
+
+### Key Utilities
+
+- `lib/utils/domFns.js` - DOM helpers: event binding, CSS transforms, user-select hacks
+- `lib/utils/positionFns.js` - Position calculations: bounds checking, grid snapping, delta computations
+- `lib/utils/getPrefix.js` - Browser prefix detection for CSS transforms
+
+### Build Outputs
+
+- `build/cjs/` - CommonJS build (Babel)
+- `build/web/react-draggable.min.js` - UMD browser bundle (Webpack)
+
+### Type Systems
+
+The codebase uses Flow for internal type checking (`// @flow` annotations) and ships TypeScript definitions in `typings/index.d.ts`. Both must stay in sync.
+
+## Key Patterns
+
+### nodeRef Pattern
+To avoid ReactDOM.findDOMNode deprecation warnings in Strict Mode, components accept a `nodeRef` prop:
+```jsx
+const nodeRef = React.useRef(null);
+<Draggable nodeRef={nodeRef}>
+  <div ref={nodeRef}>Content</div>
+</Draggable>
+```
+
+### Callback Return Values
+Returning `false` from `onStart`, `onDrag`, or `onStop` cancels the drag operation.
+
+### CSS Transform Approach
+Dragging uses CSS transforms (`translate`) rather than absolute positioning, allowing draggable elements to work regardless of their CSS position value.

Makefile

@@ -13,7 +13,7 @@ clean:
 
 lint:
 	@$(BIN)/flow
-	@$(BIN)/eslint lib/* lib/utils/* specs/*
+	@$(BIN)/eslint lib/* lib/utils/*
 	@$(BIN)/tsc -p typings
 
 build: clean build-cjs build-esm build-web
@@ -29,10 +29,12 @@ install link:
 	@yarn $@
 
 test: $(BIN)
-	@$(BIN)/karma start
+	@$(BIN)/vitest run
 
-test-phantom: $(BIN)
-	@$(BIN)/karma start karma-phantomjs.conf.js
+test-browser: build $(BIN)
+	@$(BIN)/vitest run --config vitest.browser.config.js
+
+test-all: test test-browser
 
 dev: $(BIN) clean
 	env DRAGGABLE_DEBUG=1 $(BIN)/webpack serve --mode=development

karma-phantomjs.conf.js

@@ -5,11 +5,12 @@
   "main": "build/cjs/cjs.js",
   "unpkg": "build/web/react-draggable.min.js",
   "scripts": {
-    "test": "make test",
-    "test-phantom": "make test-phantom",
-    "test-debug": "karma start --browsers=Chrome --single-run=false --auto-watch=true",
-    "test-firefox": "karma start --browsers=Firefox --single-run=false --auto-watch=true",
-    "test-ie": "karma start --browsers=IE --single-run=false --auto-watch=true",
+    "test": "vitest run --reporter=verbose",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "test:browser": "yarn build && vitest run --config vitest.browser.config.js",
+    "test:all": "yarn test && yarn test:browser",
     "dev": "make dev",
     "build": "make clean build",
     "lint": "make lint",
@@ -42,8 +43,6 @@
   },
   "homepage": "https://github.com/react-grid-layout/react-draggable",
   "devDependencies": {
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
     "@babel/cli": "^7.27.2",
     "@babel/core": "^7.27.4",
     "@babel/eslint-parser": "^7.27.5",
@@ -54,36 +53,29 @@
     "@babel/preset-react": "^7.27.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.29.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
     "@types/node": "^24.0.4",
-    "assert": "^2.1.0",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@vitejs/plugin-react": "^5.1.2",
     "babel-loader": "^10.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "eslint": "^9.29.0",
     "eslint-plugin-react": "^7.37.5",
     "flow-bin": "^0.217.0",
     "globals": "^16.2.0",
-    "jasmine-core": "^5.8.0",
-    "karma": "^6.4.4",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-cli": "2.0.0",
-    "karma-firefox-launcher": "^2.1.3",
-    "karma-ie-launcher": "^1.0.0",
-    "karma-jasmine": "^5.1.0",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-phantomjs-shim": "^1.5.0",
-    "karma-webpack": "^5.0.1",
-    "lodash": "^4.17.4",
-    "phantomjs-prebuilt": "^2.1.16",
+    "jsdom": "^27.3.0",
     "pre-commit": "^1.2.2",
     "process": "^0.11.10",
     "puppeteer": "^24.10.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "18",
+    "react-dom": "18",
     "react-frame-component": "^5.2.7",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "18",
     "semver": "^7.7.2",
-    "static-server": "^3.0.0",
     "typescript": "^5.8.3",
+    "vitest": "^4.0.15",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
@@ -103,4 +95,4 @@
     "react": ">= 16.3.0",
     "react-dom": ">= 16.3.0"
   }
-}
+}