Manual Installation
create atomic-testing installs every package below, writes a matching runner config, and drops a green example test — all in one command. Reach for this page when you'd rather wire it up by hand, or want to understand exactly what the scaffolder adds.
Pick the tab for your setup. Each installs @atomic-testing/core, the framework-agnostic HTML drivers, and the createTestEngine package for your environment, followed by that environment's peer dependencies. Once the packages are in place, head to Configure your test runner for the runner config, then the Step-by-Step Tutorial to write your first test.
The examples use pnpm; substitute npm install --save-dev or yarn add --dev. Anything on Vitest, Angular, or Playwright is experimental — the verified stacks are React + Jest and Vue 3 + Jest.
- ⚛️ React
- 💚 Vue 3
- 🎭 Playwright
pnpm add -D @atomic-testing/core @atomic-testing/component-driver-html @atomic-testing/react-19
# react-19's peer dependencies — npm/yarn don't install peers automatically like pnpm can
pnpm add -D react react-dom @testing-library/dom @testing-library/react @testing-library/user-event
On React 18 or React 17, swap in @atomic-testing/react-18 or @atomic-testing/react-legacy — see the Package Guide for the full matrix. Testing Material UI or another component library instead of plain HTML elements? See Testing a component library.
React tests need a jsdom-based runner (Jest or Vitest) with IS_REACT_ACT_ENVIRONMENT set — see Configure your test runner.
pnpm add -D @atomic-testing/core @atomic-testing/vue-3 @atomic-testing/component-driver-html
# vue-3's peer dependencies — npm/yarn don't install peers automatically like pnpm can
pnpm add -D vue @testing-library/vue @testing-library/dom @vue/compiler-sfc @testing-library/user-event
# the test runner — Jest is the verified path the CLI picks for Vue
pnpm add -D jest jest-environment-jsdom @swc/jest @swc/core @types/jest
Vue tests run under a jsdom-based runner with no IS_REACT_ACT_ENVIRONMENT flag — VueInteractor calls Vue's own nextTick() internally. The Vue Jest config needs one Vue-specific setting (customExportConditions) — see Vue: Jest with export conditions. Prefer Vitest? It works too, but is experimental: pnpm add -D vitest jsdom.
pnpm add -D @atomic-testing/core @atomic-testing/playwright @atomic-testing/component-driver-html
# playwright's peer dependency — npm/yarn don't install peers automatically like pnpm can
pnpm add -D @playwright/test
# Playwright drives real browsers — install the binaries once per machine/CI image
npx playwright install --with-deps
Unlike the jsdom-based runners, Playwright drives a real browser against a page your app serves — point it at that server with webServer/baseURL in playwright.config.ts. See the Playwright notes on Quick Start for the config.
Optional: add the test-building skills
One thing the manual path skips that the scaffolder includes by default: four agent skills (readable by Claude Code, Grok Build, Codex CLI, and other skills-aware agents) that let an AI agent build driver trees and tests for you from a plain-language prompt ("write tests for CheckoutPage") — the tests themselves stay ordinary code, run by your own runner. They're worth adding even to a hand-wired project — see Build Tests with Agent Skills for the one-command way to drop them in without touching your existing files.