Si te preguntas cómo podemos escribir tests para un componente que usa datos de un loader o un action, que emplea componentes <Link> o hace submit de un <Form>, bueno: React Router nos regala una herramienta de simulación para escribir tests con confianza. 🙂‍↔️

Podemos probar componentes con tests unitarios completamente aislados. createRoutesStub es la función que creará un contexto que simulará el contexto natural de una aplicación React Router, para así poder probar nuestros componentes sin alcanzar la base de datos. ✅

import { createRoutesStub } from "react-router";
import {
  render,
  screen,
  waitFor,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SubscriptionForm } from "./SubscriptionForm";

test("SubscriptionForm renders error message", async () => {
  
  const ERROR_MESSAGE = "wrong email format";

  const Stub = createRoutesStub([
    {
      path: "/subscribe",
      Component: SubscriptionForm,
      action() {
        return {
          errors: {
            email: ERROR_MESSAGE,
          },
        };
      },
    },
  ]);

  // Usamos el Stub para renderizar el componente
  render(<Stub initialEntries={["/subscribe"]} />);

  // Ahora, simulamos las interacciones
  userEvent.click(screen.getByText("Suscríbete"));
  await waitFor(() => screen.findByText(ERROR_MESSAGE));
});

Este ejemplo está super simplificado, solo para demostrar lo que te he dicho: que nuestros componentes se pueden renderizar en un entorno simulado que no hace llamadas reales al backend. Me gustaría dedicarle un módulo completo al testing con React Router Framework en este mismo curso, no sé; no dejes de decirme si te gustaría; ya conoces mi correo. 😉

bliss.

Enlaces relacionados

el correo del bliss: fixtergeek@gmail.com