React

Test Automation

Testing MobX Stores: Observables, Computed Values, Reactions, and Actions with Jest

MobX uses observable state, computed values, and reactions to build reactive systems. Testing MobX is straightforward because stores are plain classes with transparent state — no providers, no reducers, no dispatch. You call methods, read properties, and assert. Setup npm install mobx mobx-react-lite npm install -D jest @testing-library/

Test Automation

Testing Legend State: Observables, Computed, Persistence, and React Integration

Legend State is a high-performance state library built on a signals-based observable system. It's designed to minimize re-renders and handle large datasets efficiently. Testing it requires understanding how to read and write observables in tests, how to test computed values, and how to verify persistence.

Test Automation

Testing Zustand Stores: Actions, Selectors, Middleware, and Immer with Vitest

Zustand is a small, fast state management library with a minimal API. Its stores are plain JavaScript objects with actions — which makes them straightforward to test. The main challenges are resetting state between tests, testing middleware like persist and immer, and testing stores integrated with React components. Setup npm install

Test Automation

Testing XState v5 Machines: State Transitions, Guards, Actors, and Parallel States

XState v5 models application behavior as explicit state machines. Every state transition is predictable, every guard condition is explicit, and every side effect is an actor. This makes XState code highly testable — if you follow the right patterns. This guide covers testing XState v5 machines: transition testing, guard testing, actor

Test Automation

Testing Jotai Atoms: Derived Atoms, Async Atoms, Atom Families, and Suspense

Jotai is a primitive, flexible state management library built on atoms. Each atom is an independent piece of state, and atoms can derive from other atoms — synchronously or asynchronously. Testing Jotai requires understanding how to provide atom state in tests and how to handle async atoms with Suspense. Setup npm

Test Automation

TanStack Router Testing Guide: Routes, Loaders, and Guards with Vitest

TanStack Router is a fully type-safe router for React with built-in route loaders, search parameter validation, and nested layouts. Its type-first design means bugs often show up at build time — but runtime behaviour like data loading, access guards, and navigation still needs tests. This guide covers unit

Test Automation

TanStack Query v5 Testing: Custom Hooks, Invalidation, Optimistic Updates, and Offline Mode

TanStack Query v5 handles server state — fetching, caching, synchronizing, and updating data from your API. Every meaningful UI state it manages (loading, error, success, stale, refetching) is a testing opportunity. This guide covers testing TanStack Query v5: custom query and mutation hooks, cache invalidation, optimistic updates, and offline mode behaviour.

Test Automation

Mocking API Calls in TanStack Query Tests with MSW v2

Mock Service Worker (MSW) v2 intercepts HTTP requests at the network level, making it the best tool for testing TanStack Query hooks. Instead of mocking fetch directly (brittle, error-prone), MSW lets you define realistic API handlers that work across unit tests, integration tests, and the browser. This guide covers

Test Automation

Testing TanStack Form: Validation, Async Submission, and Field Arrays

TanStack Form is a headless form library with built-in TypeScript support, field-level validation, async submission, and field arrays. Its headless design means your tests interact with real DOM elements through the form library's state — which makes Testing Library an ideal fit. This guide covers testing TanStack

Test Automation

Testing React Server Components: RSC, Streaming, and Suspense Boundaries

React Server Components (RSC) run exclusively on the server. They can read from databases, call internal APIs, and access the filesystem — none of which is available in a jsdom environment. This creates a fundamental mismatch: your existing client-side testing tools won't work out of the box. This

Test Automation

React Compiler Testing: How React Forget Changes memo and useCallback Strategies

React Compiler — previously called React Forget — automatically memoizes your components and hooks. It eliminates the need for manual React.memo(), useCallback, and useMemo in most cases. This is a significant shift: tests that were written to verify memoization behaviour may now be testing something the compiler handles, or testing assumptions

Test Automation

React 19 Testing Guide: useOptimistic, useFormStatus, and use() with Vitest

React 19 shipped a handful of hooks that change how you think about async state, form handling, and data loading. Most of your existing tests still work — but the new hooks introduce async patterns that need deliberate test strategies. This guide covers testing useOptimistic, useFormStatus, and the new use() hook