React: Teste seus componentes | Jest | Testing Library

[@joaobraz612]

Conteúdo muito bom, Washington!

[@isaacalencar3841]

Esse vídeo foi muito bom, eu gostei demais da forma como você introduziu o conteúdo. São escassos os conteúdos sobre testes no front-end. Parabéns 💪🏻👏🏻👏🏻

[@WashingtonDeveloper]

Obrigado Isaac, que bom que vc gostou 👍.

[@Joao.Gabriel7]

Valeu pela aula cara, ajudou bastante!

[@jhonmuller8062]

Vale salientar que se você estiver tendo problemas ao executar o click do botão através do userEvent, deve ser porque faltou colocar o async na função e await na frente do userEvent.click(). Estive com esse problema. Ótimo vídeo, ensinou muito.

[@eliasfausto1377]

Excelente vídeo Washington, muito obrigado pela aula!!! Ajudou demais!

[@eulaludmila5256]

Sensacional!!!! Simples e direto, precisava de um começo assim. Muito obrigada e sucesso!!!

[@WashingtonDeveloper]

obrigado @Eula Ludmila

[@HeronHideki]

Muito bom essa forma de demonstrar, além de mostrar como criar os testes, mostra a vantagem que eu tenho em ter testes na aplicação....

[@luisdwq123]

Cara gostei muito da maneira como tu explicou o assunto, testes as vezes dão uma confusão na cabeça mas tu destrinchou bem tudo, parabens!

[@thaynasilva6846]

Estava há 2 dias lendo artigos e vendo vídeos sobre testes unitários com Jest e Testing Library e em nenhum dos diversos conteúdos que consumi obtive o que você conseguiu fazer em 21 minutos. Explicação clara, objetiva e fiel à documentação. Parabéns pela excelente didática e muito obrigada por esse vídeo, me ajudou demais! 👏👏👏

[@WashingtonDeveloper]

Fico muito feliz em poder ajudar 😁

[@pedro.britto]

Caramba! Baita aula! Muito obrigado por compartilhar seus conhecimentos, Washington. Extremamente didático. Sucesso!

[@IrlanFreitasjr]

Conteúdo muito bom, dando a base para a forma de pensar em como realizar os testes, parabéns!

[@flanelondjorge1790]

Cara! agora sei criar testes, orbrigado pelo o seu tempo.

[@WashingtonDeveloper]

Que maravilha 👏👏👏👏👏, fico feliz em poder ajudar 😁

[@andrenolasco9376]

Estou começando a me aventurar no mundo dos testes, achei o vídeo bem didático e o melhor e colocar um exemplo de refatoração de componente. Outro ponto super importante do vídeo foi que logo no início, já apresentou o site com as documentações. Muita gente quer aprender sem ter pelo menos passado na documentação antes... kkkkkk. Parabéns pelo trabalho!

[@WashingtonDeveloper]

Opa André, obrigado... essa e a diferença mesmo, os testes te deixa mais crítico, um desenvolvedor diferenciado 👍

[@jarodcavalcante]

Show!😀

[@Bruno02D]

video top

[@GeorgeMatos]

Muito bom, tava realmente precisando de algo claro e suscinto.

[@almirsilva838]

Material muito didático; gostei muito!

[@carlosamorim94]

Meu deus cara... Vc é fera demais! Finalmente consegui entender os testes! Vou começar a treinar agora mesmo! Ganhou mais um inscrito!

[@sandro1dev]

Muito bom, simples e direto! Obrigado pelo conteúdo

[@WashingtonDeveloper]

Que bom que gostou Sandro vlw 👍

[@marcelorafael23]

Muito bom. Foi simples e Sucinto. Ganhou um inscrito. 👏

[@EricFrankLi]

Gostei do conteúdo. Parabéns e obrigado.

[@lino1678]

Meus parabéns pelo conteúdo.

[@alinebarbosa6293]

parabéns, muito bom mesmo tava precisando de algo claro e objetivo. obrigado.

[@WashingtonDeveloper]

Obrigado @Aline 😉

[@_reinaldoferreira]

Fala Washington, Cara que legal o video... confesso que me chamou a atenção as sua orientações de: 1 - Orientar o pessoal a ler a documentação 2 - E estudar sobre boas praticas Parabéns pelo conteúdo e pela didática, estou seguindo e final de semana vou maratonar alguns videos seus rs

[@WashingtonDeveloper]

Fala Reinaldo tudo bem, que bom que vc gostou, espero ter ajudado de alguma forma 😁👍

[@danielhbrito]

Que aula fantástica! Me ajudou bastante!

[@maykonsousa84]

Topzeira mano!

[@paulah37]

Muito bom! Simples e direto

[@RogerioOrioli]

que didatica linda ! parabens

[@paulapompeodecamargo9733]

shooow!

[@erickpascoal6840]

Muito bom, parabéns

[@SammmLLL]

mto obrigado

[@jimmmyspd]

ótimo vídeo e ótima didática

[@RobsonAlvesJJ]

Muito bom, me ajudo bastante!

[@TiagoDiass2]

ótimo conteúdo!!

[@WashingtonDeveloper]

@obrigado Tiago

[@GaabrielRibeiro]

Toppp!

[@LeonardoLuzx]

Obrigado pelo video! Só não fica claro onde começa e termina o testing library e o jest.

[@WashingtonDeveloper]

Opa Dev Tools tudo bem? obrigado 👍. Então a direferenca esta nas responsabilidades: - Jest é um runner test, responsavel em executar testes e muito mais... um detalhe desses (muito mais) são os assertions (toBe, toEqual... jestjs.io/pt-BR/docs/expect) mais detalhe na documentação jestjs.io/pt-BR/. -Testing Library, Utilitários de teste simples e completos que incentivam boas práticas de teste(React, Angular, Vue... ), ele nos ajuda a fazer seleções do meu componente, e verificar nos (assertions do jest) para fazer as validações. mais detalhes testing-library.com/docs/react-testing-library/intro

[@danjunior865]

Ótima explicação. Bem detalhada, muito boa para quem está começando com os testes. Uma dúvida: dá pra fazer TDD com React? Ou é melhor fazer os testes depois do componente pronto?

[@WashingtonDeveloper]

Olá @Dirceu tudo bem?. Com certeza e possível utilizar TDD. Olha no Front-End, (na minha opnião) não seria necessário utilizar TDD. a não ser uma camada de DOMAIN. Mas quando falamos de UI, mais na funcionalidade, criar o componente e depois testar, ja deixa ele manutenível o suficiente.

[@gabrielpereiramendes3463]

#Excelente!

[@WashingtonDeveloper]

Obrigado Gabriel 😄

[@TaiuanPagini]

Primeiramente parabéns pelo conteudo! E queria perguntar qual extensão esta utilizando para o vscode dar as sugestões de métodos no "screen", por exemplo o getByText()?

[@WashingtonDeveloper]

Obrigado Taiuan, então não estou usando nenhuma extensão não, só as configurações padrão do VsCode(as extensões que uso para JS e o Prettier, Eslint caso já n venha no projeto), caso vc n consiga exibir, comenta aqui que posso te ajudar 👍.

[@martadeoliveiramacedomarta6126]

👏👏👏👏

[@AlbertoPNeto]

Conteúdo brilhante. Difícil achar algo tão compreensível e ao mesmo tempo completo. Porém, fiquei com uma dúvida. Onde foi utilizado o Jest? Ele está no título, mas não foi importado no código. Obrigado! E bom trabalho

[@WashingtonDeveloper]

Fala Alberto tudo bem? O Jest e o runtime, responsável pelos testes: jestjs.io/pt-BR/

[@AlbertoPNeto]

@@WashingtonDeveloper hmm então jest pega automaticamente os arquivos que terminam em test.js?

[@WashingtonDeveloper]

@@AlbertoPNeto exatamente

[@rbltv]

Topppp

[@joaoggabriellima]

Boa noite, tudo bem? Em alguns casos eu observei que a verificação poderia ter sido feita em um escopo só, por exemplo no caso do clique do botão ja poderia verificar o contador, se havia adicionado as classes e etc. Você optou por deixar os testes bem mais extraídos, cada um fazendo o mínimo possível. Essa é a maneira mais correta? Ou foi mais intencional com a proposta do vídeo? Agradeço desde já

[@WashingtonDeveloper]

Olá tudo bem graças a Deus. O video traz a necessidade de testarmos os nossos componentes. Quanto menor a parte testada melhor(sim foi intencional). Agora a questão de correto, depende como vc ou sua equipe gostaria de testar esses cenários (ou escopos). Se eu conseguir fazer vc testar seus componentes (independente da forma ou estrutura), MARAVILHA 😎

[@antonyleme7602]

Legal. Minha dúvida em relação aos testes é saber o que precisa ser testado e o que não precisa. Tenho implementado alguns testes ultimamente e tenho reparado que ficam me extensos e comecei a me perguntar se era realmente necessário testar tudo que estava testando. Eu deveria testar props dos componentes? E o visual? Indica algum conteúdo sobre isso?

[@WashingtonDeveloper]

Ola Antony, existe muitas obras muito boa, mas que eu gostei baste foi um livro de Kent Beck "Tdd Desenvolvimento Guiado por Testes"

[@arozendojr]

como que ficaria os testes, caso fosse usado os styled Componentes ?

[@WashingtonDeveloper]

Fala @Antônio tudo bem? então, não muda ta, nem deveria mudar rs. pq os styles, podem influenciar somente em alguma ação ou alteração de status, como foi mostrado no video. 👍

[@kochgamers]

fala mestre, deixa eu te fazer uma pergunta, vc ja tentou usar o jest com styled components no react native ?

[@WashingtonDeveloper]

Fala Marcus tudo bem? Já sim, não deveria dar problema, pq o styled… seria o “css”

[@JoaoVictor-rw9qb]

Amigo, normalmente não utilizamos uma pasta separada chamada test em react? Temos que usar __test__ para testar? É meio confuso pra mim, pq em node eu crio um pasta separada para testes

[@WashingtonDeveloper]

Fala João tudo bem? Então vc pode configurar para uma pasta especifica, mas eu gosto de deixar os testes dos componentes próximo. Vc pode ver aqui na documentação create-react-app.dev/docs/running-tests#filename-conventions Realmente pode diferenciar mesmo... mas dependendo da sua equipe vcs podem montar um que fique melhor 👍

[@andresouza696]

cara não sei pq mas no meu vscode não aparece as funcionalidades do jest no auto complete. pode me ajudar?

[@WashingtonDeveloper]

Opa Andre tudo bem? tenta deixar seu Vscode atualizado ou tentar usar esse plugin code.visualstudio.com/docs/editor/intellisense

[@brunomoreno3895]

nao ensina como instalar