Skip to main content

@atomic-testing/component-driver-shadcn-v1

Component drivers for shadcn/ui apps. Component drivers expose simple APIs for unit tests or end-to-end tests to interact with your components—reading state and driving actions—so test engineers focus on test flows instead of the component internals.

Why a shadcn package?​

shadcn/ui components are styled Radix UI primitives: npx shadcn add dialog copies a thin Tailwind-styled wrapper around Dialog from radix-ui into your codebase. At test time the DOM your app renders is Radix DOM — the wrapper adds classes (never stable anchors) and data-slot attributes (excellent anchors).

This package is therefore a pure re-export of @atomic-testing/component-driver-radix-v1 under the name your codebase speaks. Same classes, same behavior, one implementation:

  • instanceof agrees across both package names — a driver imported from either package is the same class.
  • Versioning tracks component-driver-radix-v1's major in lockstep.

What the drivers anchor on​

Never Tailwind utility classes — they change with every restyle. In priority order:

  1. role + accessible name (Radix renders correct ARIA on every part)
  2. data-slot — the shadcn/ui convention naming each part (data-slot="dialog-content", …)
  3. Radix state attributes — data-state, data-orientation, data-disabled, …

Installation​

npm install @atomic-testing/core @atomic-testing/react-19 \
  @atomic-testing/component-driver-html @atomic-testing/component-driver-shadcn-v1 \
  --save-dev

Usage​

import { SeparatorDriver } from '@atomic-testing/component-driver-shadcn-v1';
import { byDataTestId, ScenePart } from '@atomic-testing/core';

const parts = {
  divider: { locator: byDataTestId('divider'), driver: SeparatorDriver },
} satisfies ScenePart;

Refer to the documentation for usage patterns and examples, and to the component-driver-radix-v1 README for the driver catalog.

A pure re-export of the Radix UI v1 drivers: shadcn/ui components are styled Radix primitives, so their DOM — and therefore their drivers — is identical. Re-exporting (rather than subclassing or copying) guarantees a single class identity per driver, so instanceof agrees across both package names. This package tracks component-driver-radix-v1's major version in lockstep — the driver classes listed below are identical to the ones documented on that package's own page.

Classes​

Interfaces​

Variables​