GraphQL
Apollo Client components are hard to test without the right tools because they depend on a live GraphQL server. Apollo's MockedProvider lets you define expected operations and their responses, so you can test components in complete isolation. This guide covers the full spectrum: loading states, successful responses, errors,
React
React Router v7 uses Vite as its default build tool, which makes Vitest the natural testing choice — it reuses the same Vite config, understands import.meta.env natively, and runs 10–40x faster than Jest on Vite-based projects. This guide covers the full Vitest setup for a React Router
React
End-to-end tests for React Router v7 apps need to account for SSR hydration, client-side navigation, loader data rendering, and form action redirects. This guide sets up Playwright for a v7 app from scratch and covers every major testing scenario with working examples. Key Takeaways SSR hydration must
React
Migrating a Remix app to React Router v7 involves import path changes, API renames, and route config restructuring. The safest migration strategy writes tests against your Remix app first, then runs the same tests after migration to catch regressions. This post walks through the full test-first migration workflow. Key
React
Loaders and actions in React Router v7 are plain async functions. Testing them directly — without rendering any component — gives you fast, reliable, and surgical feedback. This post covers every scenario: happy paths, error responses, redirects, validation failures, and async mocking patterns using Vitest. Key Takeaways Test loaders and actions as
React
React Router v7 unified the React Router and Remix libraries into one package, introducing routes.ts, framework mode SSR, and new testing APIs. This guide covers how to test every layer of a v7 app — from individual loaders to full E2E flows — using Vitest, React Testing Library, and Playwright. Key
Testing
Test-driven development in React is more challenging than server-side TDD, but it's absolutely practical. The key is knowing which layer you're testing: component behavior, custom hooks, or integration between components. TDD Setup for React Modern React TDD uses React Testing Library (RTL), which tests
Testing
Snapshot testing is one of Jest's most misunderstood features. Used well, it prevents accidental UI regressions with almost zero effort. Used poorly, it becomes a maintenance burden that developers mindlessly update without thinking. This guide covers everything React developers need to know about Jest snapshot testing — from the
Testing
React component testing has evolved considerably. Enzyme snapshots gave way to React Testing Library, and the community's view on snapshot testing shifted along with it. The current reality: snapshots aren't obsolete, but their role is more specific than it once was. Understanding what they're
Testing
Testing internationalization in React applications requires a different mindset than standard component testing. With react-i18next, you're not just testing rendered text — you're testing that the correct keys are resolved, interpolation works, pluralization rules apply, and language switching triggers the right re-renders. This guide covers
React
React Cosmos is a sandbox for developing React components in isolation. Unlike Storybook and Ladle, Cosmos focuses on interactive development: you can manipulate component state in real time, inspect props changes, and mock context providers. It also integrates with testing tools so fixtures (Cosmos's name for stories) can
JavaScript
Storybook 8 expanded from a documentation tool into a component testing platform. The key additions are play functions (interaction tests that run inside the browser), portable stories (importing stories into Vitest or Jest), and the Storybook test runner that executes all play functions in CI. Together they let you write