React
Ladle is a fast, lightweight alternative to Storybook for developing and documenting React components. It uses Vite instead of Webpack, which means near-instant startup and hot module replacement measured in milliseconds rather than seconds. Ladle is compatible with the CSF (Component Story Format) that Storybook uses, so migrating existing
Test Automation
RTK Query is Redux Toolkit's built-in data fetching and caching solution. It generates hooks, reducers, and action creators from endpoint definitions — which means testing it requires a different approach than testing hand-written reducers. You need to test the API layer, cache behavior, and the mutations that
Test Automation
Redux Saga handles side effects (API calls, timers, WebSockets) as generator functions. Testing generators is conceptually simple — call .next() and check what the generator yielded — but in practice there are three distinct approaches to choose from: effect assertion, runSaga integration, and task mocking. Each has its place. Setup npm install
Test Automation
Redux Toolkit (RTK) is the official, opinionated way to write Redux logic. It eliminates the boilerplate of hand-written action creators and reducers, but testing RTK code still requires understanding what to test at each layer: slice reducers, selectors, createAsyncThunk flows, and the store itself. Setup npm install @reduxjs/toolkit
Test Automation
Effector is a reactive state manager built on the event-sourcing model. Unlike Redux, Effector has no single store — instead, you compose granular units: events, stores, and effects. This makes testing extremely straightforward: each unit is independently testable with no boilerplate. The key testing primitive is fork + allSettled, which gives
Testing
shadcn/ui is not a component library you install — it's a collection of components you copy into your codebase, built on Radix UI primitives and styled with Tailwind CSS. Because you own the source code, testing shadcn/ui components means testing your actual components, not a third-party
Testing
Headless UI, maintained by the Tailwind Labs team, provides fully accessible unstyled components for React and Vue. Unlike Radix UI, Headless UI has a smaller surface area — focused on the most common interactive patterns. Testing it requires understanding its approach to state management and how it exposes that state for
Testing
Radix UI provides unstyled, accessible React primitives that handle complex interaction patterns — keyboard navigation, focus management, ARIA attributes — so you don't have to. Testing Radix UI components effectively means verifying these accessibility behaviors work in your application context, while also validating your custom logic and styling don'
Testing
Ark UI (the headless component layer behind Chakra UI v3) is built on Zag.js — a finite state machine framework. Unlike Radix or Headless UI, Ark UI components have explicit state machines that drive behavior. This architecture makes them highly predictable, but testing requires understanding how state transitions manifest in
Testing
Headless component libraries — shadcn/ui, Radix UI, Headless UI, Ark UI — are built with accessibility as a core feature. But "accessible by design" doesn't mean "accessible by default in your application." Your composition, custom styles, and application logic can break the accessibility guarantees these
Testing
Apollo Client's hook API (useQuery, useMutation, useLazyQuery, useSubscription) is how most React apps interact with GraphQL today. Testing these hooks properly — both in isolation and within components — requires understanding React Testing Library's async patterns and Apollo's MockedProvider. This guide covers the full hook testing
Test Automation
Valtio creates proxy state that you mutate directly. Its simplicity is also what makes testing it slightly unconventional — there's no dispatch, no reducers, and the proxy itself is mutable. The keys are using snapshot() for immutable assertions and subscribe() for testing reactive behaviour. Setup npm install valtio npm