React Testing Library skill

O Claude escreve testes que clicam, digitam e esperam a tela carregar como uma pessoa faria, e que não quebram quando o código muda por dentro.

por itechmeat

instalações: 1.400
estrelas no GitHub: 24
No skills.sh desde: janeiro de 2026
Licença: MIT

Atualizada no GitHub em 24 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

itechmeat
react-testing-library
O Claude escreve testes que clicam, digitam e esperam a tela carregar como uma pessoa faria, e que não quebram quando o código muda por dentro.Auditada1.400 instalações, grátis

O que ela faz

A skill traz a referência da React Testing Library 16 pro Claude escrever teste de componente React pensando em quem usa a tela: o teste acha o botão pelo papel e pelo nome, o campo pelo rótulo e o texto pelo que aparece, em vez de olhar estado interno, classe CSS ou id.

Pra simular a pessoa, ele usa o user-event: clicar, digitar, limpar campo, escolher opção, apertar tecla, copiar e colar. Pra tela que carrega depois, usa findBy, waitFor e a espera até o 'Carregando...' sumir. Também testa hooks com renderHook e monta um render com os providers do app, como tema e login.

A skill lista o que não fazer, como usar fireEvent quando o user-event resolve, buscar por classe ou pôr waitFor em volta de findBy. Traz ainda os comparadores do jest-dom (está na tela, está visível, está desabilitado, tem tal texto) e o jeito de depurar com screen.debug e logRoles.

Nas palavras de quem fez

React Testing Library: user-centric component testing with queries, user-event simulation, async utilities, and accessibility-first API. Use when writing React…

itechmeat, no SKILL.md

Quando usar

Cobrir com teste o formulário de cadastro ou de checkout
Testar uma tela que busca dado e mostra 'Carregando...'
Conferir que um botão some ou desabilita na hora certa
Arrumar teste que quebra toda vez que o componente muda por dentro

Depois de instalar, é só pedir assim

Escreve os testes do formulário de login com React Testing Library e user-event
Testa se a lista de pedidos aparece depois de carregar e se o 'Carregando...' some
Reescreve esses testes que usam querySelector pra buscar por papel e rótulo

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a React Testing Library no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a React Testing Library, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a react-testing-library skill precisa pra funcionar?

De um projeto React com um executor de testes, como o Jest, e dos pacotes @testing-library/react e @testing-library/dom, que o Claude instala. A skill recomenda também o user-event e o jest-dom. React 19 pede a versão 16.1 ou mais nova. Não pede chave nem conta paga.

Roda no Codex e no Antigravity?

Roda: é uma skill em SKILL.md com referência e exemplos de código, que qualquer agente que escreve arquivos e roda o comando de teste consegue usar.

Ela testa o site inteiro no navegador?

Não. Ela testa componente React renderizado no ambiente de teste; não abre navegador de verdade nem percorre o site no ar.

Levar essa skill

1x react-testing-libraryR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/itechmeat/llm-code

Aprenda a usar

O que é o Claude Code (Claude CLI) e como começar
O que é o Claude Code (Claude CLI), pra que serve pra quem não programa, o que ele pede pra rodar e como se compara ao Codex, ao Antigravity e ao Cursor.