Testing

The repo uses Vitest for unit and integration tests and Playwright for end-to-end tests.

Where tests live

• Unit tests: alongside source files as *.test.ts or *.test.tsx.
• Integration tests for the full SDK: packages/tldraw/src/test/.
• Editor-only tests (no default shapes/tools/UI): packages/editor/src/lib/editor/Editor.test.ts is 41 KB and the canonical example.
• Schema/migration tests: packages/tlschema/src/migrations.test.ts is 66 KB. Every schema change ships a migration test here.
• Sync protocol tests: packages/sync-core/src/lib/TLSyncClient.test.ts, TLSyncRoom.test.ts, ClientWebSocketAdapter.test.ts. The Node sqlite-backed integration test is NodeSqliteSyncWrapper.integration.test.ts.
• E2E tests:
  • Examples: apps/examples/e2e/
  • tldraw.com: apps/dotcom/client/e2e/

Running tests

Command	Scope
yarn vitest (root)	Watch mode for the whole repo. Slow.
yarn vitest run (root)	One-shot for the whole repo. Slow but deterministic.
cd packages/<name> && yarn vitest run	One-shot for a single workspace.
cd packages/<name> && yarn vitest --grep "<pattern>"	Filter by test name.
yarn test-coverage	Coverage report; opens HTML.
yarn e2e	Playwright e2e against the examples app.
yarn e2e-dotcom	Playwright e2e against tldraw.com.
yarn e2e-dotcom-x10	Same, run 10× for flake detection.

The Vitest config lives in vitest.config.ts at the repo root and per-package as needed. The shared canvas mock (vitest-canvas-mock) is registered there.

Writing unit and integration tests

The dedicated guide is skills/write-unit-tests/. The high-level patterns:

• Use TestEditor from packages/tldraw/src/test/TestEditor.ts (or TestEditor in packages/editor/src/test/) to construct a fully wired Editor instance for a test.
• Prefer comparing whole objects in assertions: expect(shape).toMatchObject({...}) reads better than five field assertions.
• Tool-specific tests live next to the tool: packages/tldraw/src/lib/tools/SelectTool/SelectTool.test.tsx.
• Shape-specific tests live next to the shape util: packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.test.tsx.

Writing e2e tests

The dedicated guide is skills/write-e2e-tests/. Common patterns:

• E2E tests for the SDK use the Examples app as a fixture surface; each test page is an example.
• Tests use Playwright fixtures defined in apps/examples/e2e/fixtures/ (and similar in apps/dotcom/client/e2e/).
• Snapshot updates happen via .github/workflows/playwright-update-snapshots.yml or locally with --update-snapshots.

CI

.github/workflows/checks.yml is the gate. playwright-examples.yml, playwright-dotcom.yml, and playwright-perf.yml run e2e and performance tests. playwright-update-snapshots.yml is a manual workflow for refreshing snapshots.

What to test, and where

Change	Test surface
Default shape behavior	packages/tldraw/src/lib/shapes/<kind>/*.test.tsx
Default tool behavior	packages/tldraw/src/lib/tools/<Tool>/*.test.tsx
Editor primitives or managers	packages/editor/src/lib/editor/*.test.ts
Store / migrations	packages/store/src/lib/*.test.ts, packages/tlschema/src/migrations.test.ts
Sync protocol	packages/sync-core/src/lib/*.test.ts
UI components	packages/tldraw/src/test/*.test.tsx (full SDK)
dotcom routes	apps/dotcom/client/src/routes.test.tsx and e2e/

Related

• Development workflow for the broader edit/test/PR loop.
• Debugging for troubleshooting failing tests and runtime bugs.