[Front-End] React - Testando interfaces com react-testing-library
HTML-код
- Опубликовано: 5 окт 2024
- Neste vídeo mostro como criar seus primeiros testes funcionais utilizando a biblioteca react-testing-library.
Apoie:
apoia.se/mahen...
Redes Sociais:
Blog: blog.matheuscas...
Site Pessoal: www.matheuscast...
Facebook: / matheus.castiglioni.5
Github: github.com/mah...
Google Plus: plus.google.co...
Instagram: / mahenrique94
Linkedin: / matheus-castiglioni-7a...
Medium: / mahenrique94
Twitter: / mahenrique94
Referências
Sons: / @arefeitossonoros
Animações: / @greenscreenbrasil e / channel
Imagens: www.freepik.com/
![[BR][Teste] Jest - Iniciando com testes e TDD](http://i.ytimg.com/vi/sLx00kXPoTg/mqdefault.jpg)
![[BR][Teste] Jest - Iniciando com testes e TDD](/img/tr.png)
![Intro to React Testing [Jest and React Testing Library Tutorial]](http://i.ytimg.com/vi/ZmVBCpefQe8/mqdefault.jpg)
![KSI - Thick Of It (feat. Trippie Redd) [Official Music Video]](http://i.ytimg.com/vi/At8v_Yc044Y/mqdefault.jpg)
![[Front-End] Testes - Testando sua interface com Cypress](/img/1.gif)
Parabéns pela aula, simples e direta!
obrigado Thiago
preciso de mais video como o seu, estou no inicio e tenho muita dificuldade com testes. Parabéns, ótimo video!!! obrigada!
Obrigado Idilene, em breve vou começar uma série do zero e ir avançando aos poucos.
@@MatheusCastiglioni Opa!!! já ate ativei o sininho!
Muito boas explicações! Parabéns!
Obrigado Almir
Obrigado, consegui compreender melhor o RTL graças a seu video
Obrigado Nilson, preciso gravar mais vídeos atualizados sobre a lib
@Matheus Castiglioni Estou aprendendo React, essa parte de RTL é um pouco complicada, mesmo já tendo visto jest...outra coisa que preciso aprender é o hooks e redux... tomei a iniciativa de te adicionar no linkedin, caso seja possível gostaria de tirar umas dúvidas quando você tiver tempo.
demoro, pode me mandar mensagem, vou respondendo assincrono
Obrigado pelo vídeo. Foi exatamente o que estava a muito tempo procurando.
Obrigado Everson
Que qualidade, parabéns !
Obrigado Joezer
Valeu matheus ajudou bastante, muito obrigado.
sou iniciante caso alguem passe pelo mesmo problema
"waitforElement" Está deprecated eu descobri que agora e só "waitfor"
Obrigado Robson e agradeço a ajuda com depreciação do waitForElement
Muito bom 🎉
Obrigado Fender
#Excelente!
Obrigado Gabriel
Ajudou muito !
Boa Wictor
brabo dms
Obrigado
ótimo vídeo man, continue postando videos sobre testes com react. Tem todo meu apoio.
Obrigado Cleber, pode deixar, vou ver se posto mais conteúdo sobre testes
Matheus, parabéns e obrigado!
Excelente aula.
Obrigado Anderson
matheus já faz alguns meses que venho procurando no yt videos de assuntos x e y até já cheguei a comentar em um seu, toda vez me deparo com um video seu e são sempre muito uteis. parabens e vou seguir agora
Obrigado Amanda, fico muito feliz por isso.
Cara muito bom, super didático, parabéns
Obrigado Ernani
Rapaz gostei, simples e claro, como deve ser. Parabéns
Obrigado Berilo.
Parabéns, muito bom o conteúdo. Não sou muito experiente, mas consegui compreender perfeitamente. Muito obrigada :)
Obrigado Gilderlane
Excelente explicação para o entendimento de programadores menos experientes.
Obrigado Giovanni.
Muito bom o vídeo, vc explica muito bem mano, eu to começando a aprender agora sobre testes e consegui entender tudo de forma clara e objetiva, as vezes o pessoal iniciante tem mais dificuldades, ai alguns detalhes que o pessoal não explica, passa batido deixando mais duvidas ainda, continua assim focando nos detalhes e ta muito bom.
Obrigado Giovanni, a ideia dos vídeos é não deixar a pessoa sair com dúvida (as vezes acontece), evoluindo e melhorando a cada dia.
Ótimo video, apoio fazer mais sobre o tema utilizando TypeScript
Obrigado Tiago, no momento eu parei com o canal, se eu voltar eu vejo se faço com TS, agradeço a sugestão.
Conteúdo extremamente valioso! Ajudou muito!
Obrigado Maicon, fico feliz em ajudar.
Aprendendo muito sobre testes contigo. Parabéns, como te falei em outro vídeo, acho massa demais vc iniciar uma série.
Vejo muita galera aprendendo a fazer clone de ifood, nubank e outros apps, seria muito legal fazer algum projetinho grande assim ou médio, porém com foco em TDD ou ao menos cobrindo de testes man
E não sei se vc já usa, mas tem o terminal no próprio VSCode, vi q precisou dar uma redimencionada na tela...
Obrigado Rafael, fico feliz que esteja lhe ajudando, pretendo gravar mais vídeos de teste sim. Eu prefiro utilizar o terminal fora do VSCode, obrigado pelo toque.
Excelente conteúdo.
Obrigado Ronaldo
Parabéns pelo video man, muito top
Obrigado Rafael
Explicação muito boa! Obrigado pelo vídeo =D
Obrigado Eduardo
Muito bom, obrigado de novo.
Obrigado Gabriel
Matheus salvando de novo depois do single-SPA kkkkk. Valeu demais, cara! Seu conteúdo é excelente!
Fala Julio, obrigado pelo feedback e pela força, fico muito feliz em ajudar de alguma forma =DDD
Matheus, na última busca que você fez pelo nome "testing", isso não vai dar falso positivos no futuro, caso sejam adicionadas tarefas com o mesmo nome? qual seria a saída para isso? roda um "loop for" e ir adicionando alguma key para diferenciar os itens?
Fala Majula, com certeza pode dar falsos positivos, otima observação. Nesse caso daria para verificar se não existe um registro antes de submeter o form e depois verificar se existe, da para fazer como você falou, através de algum data attribute tu pegar o key com algum identificar unico, daria para mockar um retorno da API no submit do formulário e com esse mock tu busca na tabela o valor, tem varias formas kkkkk
Sou ser fã irmão, tamo junto! #voltaPraDextra
Eh nois Pedroso kkkkk
Parabéns Matheus, o vídeo ficou muito bom. Seria bacana fazer um de um projeto real com requisições em API e etc....
Fala Paulo, sim, tenho bastante conteudo na fila aqui, só preciso voltar com o canal.
Parabéns pelo conteúdo amigo!
Muito bom!
Consegui entender todo o conteúdo de primeira!
Explicação objetiva e simples de entender.
Ganhou um inscrito :)
ps: Já ganhou meu respeito pelo papel de parede o seu PC kkk
Obrigado Igor, papel de parede muito top kkkkkkk
Muito bom o vídeo! Parabéns, só acredito que pra melhorar o último passo do teste poderia verificar a última task inserida e não qualquer elemento que tenha o texto da task, pro caso de tasks duplicadas ou até outros elementos na página com o nome da task. Talvez se colocar o último elemento como data-testid=lastest-task ou algo assim, aí pegar lá no test pelo testid latest-task, acho que assim seria mais acertivo, mas no geral um ótimo vídeo! Parabéns!
Eu não diria melhorar e sim adicionar mais validações. Para o exemplo do vídeo essa regra de negócio não é importante, só queriamos verificar se tinha uma tarefa independente de duplicidade ou ordem. Para pegar o ultimo, poderíamos pegar a ultima posição do array e verificar o conteúdo do mesmo. Obrigado pelo feedback, nos proximos videos sobre teste posso adicionar mais essa validação.
@@MatheusCastiglioni Show! Parabéns pelo trabalho, continua assim, teus vídeos são muito bons. 👍
Obrigado Anderson, fico muito feliz por isso.
Show! ☕👌
Obrigado mano
13:14
Gostei muito da explicação. Mas gostaria de saber como fazer isso com mais de um campo, ao invés de somente um.
Obrigado Nelson, para isso você precisa buscar os demais campos e realizar as validações nele, assim como foi feito com o campo do todo
Olá, é melhor usar essa libary do que o padrão que vem no react pra testar?
Isso vai depender de cada cenário, se a padrão te atende o projeto, talvez não faça sentido usar uma externa, varia de cada arquitetura. Eu particularmente prefiro utilizar de forma separada.
O Jest puro ou em conjunto com o enzyme é muito bom mas muito focado em detalhe de implementação. Já a testing-library/react é mais focada em comportamento, e por isso executa testes mais focado do ponto de vista do usuário e não da implementação.
Também dá para fazer testes de comportamento com Jest e Enzyme Pablo, de maneira bem similar ao testing-library.
Existe algum problema em pegar os elementos direto da DOM? Por exemplo, ao invés de usar o waitForElement e o getByTestId, simplesmente pegar o elemento com um document.querySelector?
Aliás, excelente vídeo, qualidade incrível!
Obrigado Rodrigo, eu não acho muito legal, afinal, temos todo conjunto de ferramenta disponível pelo testing-library.
quando eu sei que aquele componente precisa de "wait waitFor" na declaração dentro do jest?
Fala Eduardo, normalmente quando é feita alguma ação que tenha efeitos colaterais ou não seja síncrona, ai a gente faz esse `wait` para garantir que tudo vai ser executado antes de buscar o elemento
@@MatheusCastiglioni no meu caso eu tenho um estado que renderiza dentro de um , no test ele tá vindo o valor antigo do estado, devo usar wait nesse caso?
Preciso entender um pouco mais, no seu teste você pega o P com X valor, ai simula algum comportamento do botão que vai atualizar o conteudo do P, mas, no este o P ainda esta com o valor antigo, é isso?
@@MatheusCastiglioni isso! ao iniciar a aplicação o valor dentro do é R$0,00, depois que mudo alguns valores e do um Click em um botão, o altera o valor. Mas no test ele não muda o estado
@@dadomarr Uhmmmm, ja tentou buscar novamente o p? Ou seja, busca ele de novo depois de simular o click