Testes no React com Vitest e Testing Library

Um dos requisitos mais exigidos pelas empresas é testes. Garantir que tudo está funcionando e mais do que isso, garantir que mesmo que após uma refatoração tudo continue como estava antes é muito importante para o futuro de uma aplicação.
Neste vídeo você vai aprender a como testar os componentes no React com Vitest, Testing Library e Jest.
Compartilhe esse vídeo: • Testes no React com Vi...
Vídeos que você pode gostar:
Criando API's com tRPC
• Criando API's com tRPC
Solucionando Problemas do Jeito Certo e na Prática
• A Soft Skill que todo ...
Como Aprender Programação em 2022
• Como Aprender Programa...
Construindo Interfaces com o Tailwind CSS
• Construindo Interfaces...
Github Actions do Zero e na Prática
• Github Actions do Zero...
UI Declarativa no React Native
• UI Declarativa no Reac...
✅ Conheça o Long Cycle Developer: dogcode.dev/lo...
✅ Saiba mais sobre o OnMount:
dogcode.dev/on...
dogcode
Comunidade no Discord: / discord
Instagram: @dogcode.dev
#REACTJS #VITEST

[@andersonsantosqueiroz6165]

Terceira vez que vejo um de teus vídeos. Dessa vez me inscrevo no canal.

[@Zelion12]

Qual extensão você esta usando que mostra esses labels por exemplo element: , id: , actual: etc isso deve ajudar bastante. Se poder me falar se é uma extension que você esta utilizando. Obrigado.

[@eriveltondasilva6878]

20:20 o teste mostrou um "bug", ou melhor, a falta de {} no children, pra descobrir isso só indo na aplicação e os testes já nos mostrou o problema antes de dar npm run dev, isso é top

[@rzjprogramador6297]

Show ja tá likado kkk...vitest se puder faz um compilado usar todos comandos vitest em back node..abracos obrigado

[@NikoKlebtz]

Muito bom, mas você pode usar o beforeEach isolados por describe, então você teria aqueles dois testes dentro de um mesmo describe com beforeEach e um outro sem.

[@rbpolim]

Excelente, mano! So conteúdo bom!!! 🔥🔥

[@uezilimaciel2421]

que extenção é essa que coloca essa labels "name, fn, factory, ui" nos testes? Time: 9:53

[@dogcodedev]

Inlay Hint

[@matheusalmeida955]

Muito bom o conteúdo, só uma dica, eu testei aqui, para não precisarmos colocar a importação jest-dom em todo arquivo de teste: test: { globals: true, environment: 'jsdom', setupFiles: ['@testing-library/jest-dom'], },

[@samuelDsiqueiraA]

muito maneiro, to tentando aqui, aprendendo mt coisa agora, queria aprender usar os testes pra combar com TS

[@DevTomazetti]

Só para mim que o toBeInTheDocument não está mais funcionando?

[@marcoantoniodalvesco9944]

pra mim também não estava, mas um import "@testing-library/jest-dom" consertou o problema

[@Kingnauta]

No meu ele da um erro TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null.

[@thiagosaud7190]

Qual é o nome desta extensão que você utiliza para exibir ali os parâmetros, por exemplo "fn" etc?

[@dogcodedev]

Faala Thiago, instagram.com/p/Ch95URVAgby/

[@edwinastudillo1052]

se o error no vite.config.ts ainda esta depois da configuracao que mais tenho que fazer

[@angelopedrosa7593]

vlw cara, seu vídeo ajudo muito

[@leonardosouza1948]

Conteúdo muito boooom, poderia dar sequencia em testes mais avançados.

[@ronaldtomaz8155]

Mano fiz essa config básica, mas ele não reconhece o objeto de test. O que pode ser?

[@thed7707]

Resolveu o problema, meu nobre?

[@Kingnauta]

o meu ta assim

[@TheViictoorhugo]

Adiciona o seguinte no começo do arquivo: /// /// kzbin.info/www/bejne/fV6Xq5p_hdidobc

[@Manuelsembola]

Teste ! Sei o por que! Por que der repente o cliente quis mudar tudo na tela ou alguns erros de português ! Enfim para evitar futuras dores de cabeça que você só irá saber quando passar! 😅😁