Testar componentes

Seu formulário de cadastro é coberto por quatorze testes, todos verdes. No mês passado, um desenvolvedor substituiu <div class="erreur"> por um componente <Alerte> que aplica classes utilitárias geradas. Os quatorze testes, que buscavam .erreur com querySelector, ficaram vermelhos de uma só vez, embora o produto funcionasse perfeitamente. Duas horas depois, estavam consertados — e, na semana seguinte, um bug de verdade passou: a mensagem de erro era exibida, mas sem vínculo com o campo em questão, portanto invisível para um leitor de tela. Nenhum teste percebeu.

Essas duas falhas têm a mesma causa. Consultar o DOM por classe CSS testa a estrutura interna da renderização, não o que o usuário percebe. A estrutura muda o tempo todo sem que o comportamento se altere, o que produz falsos positivos; e ela permanece idêntica quando a acessibilidade se degrada, o que produz falsos negativos. A correção é mecânica: busque seus elementos pelo papel acessível (role) e pelo nome acessível, exatamente como faz um leitor de tela ou um usuário que navega pelo teclado. Seus testes passam a ser insensíveis a refações de estilo e sensíveis às regressões que realmente importam.