Vérifiez la sémantique, l’état, le focus et le rendu.
Testez le comportement observable : rôles, noms accessibles, valeurs, focus, fermeture et état désactivé. Évitez de dépendre des classes internes lq-* ou de la structure des filtres 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])
})Pour les contrôles gérés par l’application, effectuez un nouveau rendu avec la valeur suivante et vérifiez que le test conserve la maîtrise de l’état. Pour les contrôles avec état interne, vérifiez le changement et un unique appel au callback.
Recherchez le contenu du portail dans le document complet. Testez l’ouverture au clavier, le focus initial, son confinement, Escape, la fermeture par l’arrière-plan si disponible, les callbacks et la restauration du focus.
Capturez le navigateur sur un arrière-plan détaillé, en thèmes clair et sombre, avec focus et états désactivés. Testez tous les moteurs compatibles.
Séparez les tests d’interaction des captures pour qu’une mise à jour visuelle ne masque pas un défaut de comportement. Utilisez de vrais navigateurs pour le focus, les portails, le mouvement réduit et les matériaux.