Verifica semántica, estado, foco y renderizado.
Prueba el comportamiento observable: roles, nombres accesibles, valores, foco, cierre y estado deshabilitado. Evita depender de clases internas lq-* o de la estructura de filtros SVG.
import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { Toggle } from "@liquidify/react"
it("reports the next checked value", async () => {
const user = userEvent.setup()
const changes: boolean[] = []
render(
<Toggle
aria-label="Product updates"
defaultChecked={false}
onChange={(checked) => changes.push(checked)}
/>,
)
await user.click(screen.getByRole("switch", { name: "Product updates" }))
expect(changes).toEqual([true])
})Para controles gestionados por la aplicación, vuelve a renderizar con el siguiente valor y comprueba que la prueba conserva el control del estado. Para controles con estado interno, comprueba el cambio y una única llamada al callback.
Busca el contenido del portal en el documento completo. Prueba apertura con teclado, foco inicial, contención del foco, Escape, cierre desde el fondo cuando corresponda, callbacks y restauración del foco.
Captura el navegador sobre un fondo con detalle, en temas claro y oscuro, con foco y estados deshabilitados. Prueba todos los motores compatibles.
Mantén separadas las pruebas de interacción y las capturas para que una actualización visual no oculte errores de comportamiento. Usa navegadores reales para foco, portales, movimiento reducido y materiales.