Kevin Martínez

Posts

82 posts on testing, TWD, React Router and working with AI. Posts marked ES are in Spanish.

2026

  1. Your Repo Can Now Tell People It Cares About Accessibility

    GitHub now shows an Accessibility tab on every repository that has an ACCESSIBILITY.md. Here is why it matters, what we put in TWD's, and how to add yours in an afternoon.

  2. 3 Developer Archetypes That Can Break a Team

    Three patterns that quietly make a team weaker: the Senior Cynic, the Guess Coder, and the Superhero. All three usually get rewarded, all three optimize for themselves instead of the team, and AI makes each one easier to scale.

  3. Your Agent Says the Tests Pass. Watch Them

    When the same agent writes the code and the test that proves it, a green tick is a claim rather than evidence. A 15 second video of the test running is the cheapest way to check the claim without reading the diff.

  4. Your Tests Pass. Your Layout Is Broken

    Assertions check text and state, never geometry. Visual testing covers that gap, but the reason teams abandon it is the approval queue, not the price. TWD's matchLayout takes a different route.

  5. Run Vue Component Tests Where Vue Runs: The Browser

    @testing-library/vue's render() works inside a running dev server, so component tests execute in the browser the component ships to: real layout, real CSS, real reactivity, next to your flow tests in the same session.

  6. No More Fake DOM: Testing Library Unit Tests in the Real Browser

    Testing Library's render() works inside a running dev server, so your component tests can execute in a real browser next to your flow tests, in the same run, under one coverage report. The setup, the two traps, and where each style fits.

  7. AI Made Code Review the Bottleneck. Attach the UI to Your PR

    A green test suite tells a reviewer the assertions passed, not what the UI does. TWD can record the run as a video paced at human speed, so the flow itself ships with the pull request.

  8. Real-browser testing for Open Cells apps with TWD

    Open Cells is a Web Components framework from BBVA. TWD tests apps built with it, and any client-rendered frontend, in the real browser with real DOM, real components, and real browser APIs, mocking only the network. Coverage included.

  9. Testing microfrontends with TWD, one suite per team

    Microfrontends split a frontend into apps that build and deploy on their own, often on different frameworks and different versions. TWD gives every team the same in-browser runner without forcing a shared setup, and the same suites run headless in CI.

  10. Test your vanilla JS app in the real browser, with no build step

    Plain HTML and JavaScript apps sit in a testing gap between "nothing" and "adopt a whole framework". TWD runs real in-browser tests from a single CDN import map, and those tests survive a later migration to React.

  11. Testing HTMX apps in the real browser with TWD

    HTMX apps return HTML, not JSON, and run no build step. TWD loads from a CDN and tests the hypermedia flow where it actually happens, in the browser, against your real backend.

  12. The easiest way to test a legacy Create React App

    CRA is deprecated but your app still ships. You don't need a Vite migration to get real browser tests. TWD runs on Webpack with one block in your entry file.

  13. The Production Bug You Can't Reproduce by Clicking

    Some bugs only happen when a request fails or arrives late at the exact wrong moment. You can't trigger that manually. An AI agent reading the code plus deterministic TWD mocks made it reproducible in a test.

  14. Automated Accessibility Testing: axe-core, Keyboard Navigation, and WCAG in the Browser

    How to write automated accessibility tests that catch WCAG violations in dynamic states, using axe-core for rule checks and keyboard navigation tests for focus order, all running in a real browser.

  15. In-Browser Testing: Vitest Browser Mode and TWD, Side by Side

    A hands-on comparison of Vitest Browser Mode and TWD on the same TODO app. Setup, the separate browser, rendering a real app, network mocking, coverage and CI. Where each one fits, and the cleanest read on which to reach for.

  16. Testing Nuxt apps in the real browser, against a real backend

    Test your Nuxt pages in the real browser with TWD, against the real Nitro backend and database. No route mocks: a dev-only endpoint resets the database before each test.

  17. Playwright vs TWD: A Frontend Developer's Honest Comparison

    A hands-on comparison of Playwright and TWD for frontend testing. Same app, same bugs, two very different dev loops. What each one feels like to work with, and the cleanest way to combine them.

  18. Frontend with AI: workflow first, agent second

    AI only amplifies what your team already does. Define the workflow first, turn the AI on second, and let TWD run the tests inside the browser tab you already have open. Here's the full anatomy.

  19. The easiest way to test React Router v7 apps

    The official React Router docs send you down two paths for testing, and neither covers route-level components. TWD uses the framework's own createRoutesStub, but in the real browser, so the gap closes.

  20. Testing TanStack Router + Query apps in the real browser

    How to test apps built with TanStack Router, Query, and Form without jsdom and without wrapping everything in custom providers. Two Vite plugins, ~15 lines of test code, and one trick for the React Query cache.

  21. TWD setup is now two Vite plugins and zero app code

    twd-js@1.8 and twd-relay@1.2 both ship Vite plugins. The sidebar, test discovery, service worker, and relay browser client all move into vite.config.ts. main.tsx no longer needs a single line of TWD wiring.

  22. Two test runtimes, two coverage reports, one fragile merge

    Two test runners means two coverage outputs and a fragile merge step. Running both styles in TWD collapses them into a single report.

  23. From Local Tests to CI in One Command

    The /twd:ci-setup skill detects your project config and generates a GitHub Actions workflow with the twd-cli action, so your TWD tests run on every push.

  24. Guide to AI-Powered Frontend Testing with TWD

    If you've ever watched an AI assistant generate a test file and thought "that looks right" only to spend the next twenty minutes fixing imports, selectors, and…

  25. Testing Payment Flows Without the Payment SDK

    How to use component mocking to test payment callbacks, analytics events, and error handling without depending on third-party SDKs like Adyen or Stripe.

  26. Turning Your Test Suite Into a Visual Map Your Whole Team Can Read

    The final piece of the TWD AI workflow — /twd:test-flow-gallery generates Mermaid flowcharts and business-friendly summaries from your test files, making coverage visible to developers, product, and QA alike.

  27. When Your Mocks Lie: Contract Testing with TWD

    How TWD validates every mock response against your OpenAPI spec on every test run — catching schema drift before it hits production.

  28. Your AI Doesn't Just Write Tests. It Runs Them Too.

    The /twd skill writes tests, executes them in your real browser via WebSocket, reads the results, and fixes failures automatically. Here's how the write-run-fix loop works.

  29. Your Tests Are Running — But Are They Covering the Right Things?

    The /twd:test-gaps skill scans your project to find untested and partially-tested routes, classifies them by risk, and tells you exactly where to focus next.

  30. Your Tests Pass. But Are They Good? Grading Test Quality with /twd:test-quality

    Writing tests is easy. Writing tests that actually catch bugs is harder. The /twd:test-quality skill grades your test files across four dimensions and tells you exactly what to fix.

  31. Stop Letting AI Write Untestable Code. Add Determinism Back with TWD

    The /twd:setup skill analyzes your project and generates a patterns file that teaches your AI agent how tests are structured in your codebase — turning generic AI-written tests into ones that actually fit your conventions.

  32. Are Developers Still Learning, or Just Using AI?

    We are moving from writing code to writing specifications. Instead of implementing features ourselves, we rely more on agent modes and tools like Claude Code…

  33. TWD Tip: Stub Auth0 Hooks and Mock React Modules

    Authentication is one of the trickiest features to test in modern apps.

  34. TWD 1.4.x is out – focused on Developer Experience

    We’ve just released TWD 1.4.x, and this version is all about improving the developer experience while testing.

2025

  1. Modern Frontend Frameworks Are Failing at Testing

    A few weeks after releasing TWD, a tool designed to integrate testing directly into the development workflow. I started creating testing recipes for different…

  2. Testing shadcn/ui components with TWD

    I’ve put together a small documentation site that shows how to test shadcn/ui components using TWD, built on top of Testing Library.

  3. TWD 1.3.x release - Multiple framework support

    One of the biggest milestones we’ve been working on is now live: TWD 1.3.x brings full multi-framework support with a single unified setup.

  4. TWD 1.2.x release - Component mocking, test and ci improvements

    We have some amazing news in the TWD ecosystem! The new v1.2.x release brings several powerful and much-requested features:

  5. Testing While Developing (Part 6): Using Testing Library Selectors

    In this part, we’ll look at a new feature in TWD: support for Testing Library–style selectors. These selectors are widely known in the community, and while you…

  6. Testing While Developing (Part 2): Selectors, Assertions, and User Events

    In the previous post, we set up our basic testing configuration and used the visit command to load our app. Now, we’re ready to make our tests a little more…

  7. Testing While Developing (Part 3): Mocking API Requests

    In Part 2, we explored assertions, selectors, and user interactions in TWD. We used those tools to test the homepage, which only had a single button.

  8. Testing While Developing (Part 4): Running Tests in CI

    In Part 3, we explored one of TWD’s core features — network mocking — and completed our first full set of tests. Now, it’s time to take the next step: running…

  9. Testing While Developing (Part 5): Collecting Coverage

    TWD still has many more advanced features — such as function mocking — but with what we’ve covered so far, you already have everything a solid testing tool…

  10. Testing While Developing (Part 1) – Installation and First Test

    Let’s start our journey learning how to use TWD (Test While Developing)! In this first part, we’ll work with a small finished project that includes two pages:

  11. TWD getting started

    A few months ago, I wrote about Testing While Developing, where I rethought how we add tests — not as an afterthought, but as part of the development process…

  12. Testing while developing TWD - NestJS example

    In this article, we’ll apply the TWD mindset to a NestJS project.

  13. Rethinking Testing: Why I Test While Developing

    These days, we're surrounded by tools that help us move faster — frameworks, CLIs, even AI that writes code for us. It's never been easier to build.

  14. Supabase + React Router – Testing supabase service (Part 6)

    In this part of the series, we shift gears toward validating our logic with real tests. This time, we’ll focus on testing the Supabase services directly - not…

  15. Supabase + React Router – Replacing Mock Data and Enabling RLS (Part 5)

    In this part of the series, we’re finally saying goodbye to the mock data and connecting our app to real Supabase tables. The goal is to make sure the contacts…

  16. Supabase + React Router – Optimizing Auth Requests with Cookies (Part 4)

    In this part of the series, we’re still working on authentication — but this time, we’re going to optimize repeated calls to Supabase’s auth.getUser().

  17. Supabase + React Router: protect routes, login and logout (Part 3)

    In this part of the series, we’ll implement user login, logout, and protect routes using Supabase and React Router.

  18. Supabase + React Router: Signup and Auth Setup (Part 2)

    Let’s continue our series by adding some React code to handle user registration with Supabase.

  19. Supabase + React Router: Local Development and Migrations (Part 1)

    Welcome to a new series where we explore Supabase and its integration with React Router. Throughout the posts, we’ll cover topics like:

  20. Setting Up a Web Development Environment on Windows

    If you're just starting out in web development and using a Windows machine, this guide will walk you through the essential setup to get productive quickly.

  21. React Router Data Mode: Part 1 - Installation and first routes

    In this series, we will focus on the Data Mode, which is undoubtedly my favorite for creating well-structured and maintainable SPAs.

  22. React Router Data Mode: Part 10 - Testing with Vitest and React Testing Library

    We’ve reached the final part of this series on React Router Data Mode. In this episode, we’ll talk about testing—one of the most important (and often…

  23. React Router Data Mode: Part 2 - Nested routes and outlets

    In this second part of our React Router v7 tutorial, we will dive deeper into the routing system: how to nest views within a shared layout, how to navigate…

  24. React Router Data Mode: Part 3 - Loaders and data fetching

    Let's move on to the third part of this tutorial series. In this case, we'll look at a concept that comes from Remix and can now also be found in React Router…

  25. React Router Data Mode: Part 4 - Routes with parameters, useRouteLoaderData and useParams

    We continue with the fourth part of this series on React Router data mode. This time, we’ll dive deeper into loaders, first by adding a contact detail screen…

  26. React Router Data Mode: Part 5 - Refactor, useParams and NavLink

    We continue with the fifth part of this series on React Router Data Mode. This time, it will be a brief post where we’ll do some refactors, review the…

  27. React Router Data Mode: Part 6 - Actions, forms and mutations

    We continue with the sixth part of this series on React Router Data Mode. This time, we'll talk about actions: one of the key pieces for data handling that…

  28. React Router Data Mode: Part 7 - Multiple actions and form handling

    We continue with the seventh part of this series on React Router Data Mode. This time, we'll dive deeper into using actions and how to handle multiple…

  29. React Router Data Mode: Part 8 - Validations, useFetcher and React Hook Form

    We continue with the eighth part of this series on React Router Data Mode. This time, we'll answer two questions left pending from the previous post:

  30. React Router Data Mode: Part 9 - Optimistic UI with useFetcher

    We continue with the ninth part of this series on React Router Data Mode. This time, we'll talk about a very interesting concept that is quite easy to…

  31. React Router Data Mode: Parte 10 – Testing con Vitest y React Testing LibraryES

    Llegamos a la última entrega de esta serie sobre React Router Data Mode. En este episodio hablaremos de testing, una de las partes más importantes del…

  32. React Router Data Mode: Parte 9 – Optimistic UI con useFetcherES

    Continuamos con la novena entrega de esta serie sobre React Router Data Mode. En esta ocasión vamos a hablar de un concepto muy interesante, y que con React…

  33. React Router Data Mode: Parte 8 – Validaciones, useFetcher y React Hook FormES

    Continuamos con la octava entrega de esta serie sobre React Router Data Mode. En esta ocasión, vamos a responder dos preguntas que quedaron pendientes en el…

  34. React Router Data Mode: Parte 7 – Múltiples acciones y manejo de formulariosES

    Continuamos con la séptima entrega de esta serie sobre React Router Data Mode. En esta ocasión, profundizaremos en el uso de las action y cómo gestionar…

  35. React Router Data Mode: Parte 6 – Actions, formularios y mutacionesES

    Continuamos con la sexta entrega de esta serie sobre React Router Data Mode. En esta ocasión hablaremos sobre las actions: una de las piezas clave para el…

  36. React Router Data Mode: Parte 5 - refactor, useParams y NavLinkES

    Continuamos con la quinta entrega de esta serie sobre React Router Data Mode. En esta ocasión, será un post breve donde haremos algunos refactors y repasaremos…

  37. React Testing Setup: Vitest + TypeScript + React Testing Library

    In this post, I’ll walk you through how to set up a React app using Vite and TypeScript with Vitest and React Testing Library.

  38. React Router Data Mode: Parte 4 – Rutas con parámetros, useRouteLoaderData y useParamsES

    Continuamos con la cuarta entrega de esta serie sobre React Router data mode. En esta ocasión seguimos profundizando en los loaders, primero añadiendo la…

  39. React Router Data mode: Parte 3 - Loaders y carga de datosES

    Vamos con la tercera parte de esta serie de tutoriales. En este caso, veremos un concepto que viene de Remix y que ahora también podemos encontrar en React…

  40. ¿Qué pasará con React Router? Tranquilidad tras el anuncio "Wake up, Remix!"ES

    El reciente anuncio titulado "Wake up, Remix!" ha generado diversas reacciones en la comunidad de desarrolladores. Es comprensible que surjan preguntas sobre…

  41. React Router v7 Remains Strong: Clarity After the “Wake up, Remix!” Announcement

    The recent announcement titled "Wake up, Remix!" has sparked a lot of reactions across the developer community. It’s natural to have questions about the future…

  42. React Router Data mode: Parte 2 - Rutas anidadas y outletsES

    En esta segunda entrega de nuestro tutorial de React Router v7, vamos a profundizar en el sistema de rutas: cómo anidar vistas dentro de un layout compartido…

  43. React Router v7: The Evolution React Needed

    If you're reading this, you're probably working with React or learning how to use it. And if that’s the case, you’ve surely heard of react-router, the most…

  44. React Router Data Mode: Parte 1 – Instalación y primeras rutasES

    Hace poco hablé de por qué React Router es una de las mejores herramientas que tenemos hoy en día en el ecosistema de React. En ese artículo mencioné los 3…

  45. React Router v7: la evolución que React necesitabaES

    Si estás leyendo esto, probablemente estés trabajando con React o aprendiendo a usarlo. Y si es así, seguro has escuchado hablar de react-router, la librería…

2024

  1. Using ParaglideJS with Remix

    In this guide you will lean how to add internationalised routing to your Remix App. We will use ParaglideJS to manage our messages and the Remix-paraglideJS…

2021

  1. How to create easy Docs in a Node.js REST API

    In this post we will talk about how to document your Node.js REST API with express-jsdoc-swagger.

  2. How to validate your REST API based on your Docs

    This post is a second part of the previous one and we will talk about how to add validation based on your documentation with express-oas-validator