Testando aplicações React com Jest & Testing Library - Decode

[@fernandodepaula5850]

para quem está acompanhando com o video transform: { "^.+\\.(t|j)sx?$": [ "@swc/jest", { jsc: { parser: { syntax: "typescript", tsx: true, decorators: true, }, keepClassNames: true, transform: { legacyDecorator: true, decoratorMetadata: true, react: { runtime: "automatic", }, }, }, module: { type: "es6", noInterop: false, }, }, ], },

[@mathgsouza]

Guerreiro humilde

[@madm4n899]

Obrigado, amigo, você é um amigo

[@kaiobraga5194]

GOD DEMAIS !

[@margaridaandre3392]

Dev amigo, obrigada!

[@highupabove9548]

Esse é meu mininu

[@juansvrr]

o conteúdo da live começa em 8:32 conteúdo igual esse não se acha em qualquer lugar não, parabéns diego!

[@viniciusmarsola4126]

Para quem esta criando o projeto nesse momento, com react 18. Talvez voce precise fazer as seguinte confitgurações: instalar: npm install -D jest-environment-jsdom no seu ts config: "moduleResolution": "node" ou "NodeNext",

[@henriqueconzatti618]

Não rolou comigo, ainda buscando uma solução, se encontrar respondo aqui. Consegui usar esse lib configurando um module.exports no jest.config.ts, mas ele ainda acusa falha no render()

[@henriqueconzatti618]

consegui, removi o module.exports, e acrescentei setupFilesAfterEnv: ['@testing-library/jest-dom'], testEnvironment: 'jsdom', após o transform dentro de config mesmo, rodou liso

[@mrzinofc]

@@henriqueconzatti618 salvou demais mlk hahah

[@ericketiene9149]

data test id: 35:35 user event click: 43:20 debug: 44: 40 user event type: 47:45 waitFor(): 52:00 Not - Negação de expect: 55:50 render with new prop: 56:48 -Initial State: 57:30v -re-render: 1:00:45 -screen: 1:04:24

[@humbertoromanojr]

Cheguei tarde e perdi um pouco, agora rever e consumir bons conhecimentos Era o que precisava agora JEST e Testing-library com REACT

[@mouravocal]

Sensacional, estou estudando Jest pra uma entrevista de emprego e claro busquei conteúdo de vocês que como sempre é excelente, eu passando nesse teste minha situação financeira melhora e com certeza invisto no Ignite xará 😃😃😃😃

[@cedroigor]

"Teste não vai fazer falta na sua vida até você sofrer pela falta de testes" - eu estou justamente agora sofrendo pela falta de testes kkk vídeo no momento certo

[@kaiophillipe6004]

kkkkk.. Verdade!

[@vitvitvitvitvitvitvitvit]

ter que arrumar um código que estava funcionando é depressão dms

[@daniellyaparecidamoreira4943]

a pessoa faz com um erro bobo tipo o remover tá escrito remoer e mil pessoas viram isso, as vezes acontece muito

[@murilorerisondesousapaz5065]

Por mais que trabalhe com isso, ainda não consegui criar gosto por testes

[@paulorobertotrindade5186]

Top demais o conteúdo. Essa semana mesmo comeceiii a estudar pois na empresa que estou hoje é necessário realizar testes unitários e essa live veio na hora certa. até o momento não tinha encontrado neenhum conteúdo tão bom assim, principalmente para quem não tem experiência com testes.

[@Andrielson_FS]

Valeu pelo conteúdo! Já tinha ouvido falar da Testing Library, mas ainda não tinha visto exemplos. Vou começar a utilizar nos projetos.

[@gabriel_matoss]

Para quem estiver vendo esse video, se atente a documentação, pois algumas mudaram. Como por exemplo a utilização do userEvent.

[@emilyjuly4306]

Para quem não conseguiu usar as funções do jest-dom, criando o arquivo setup.ts. Importa a lib (import "@testing-library/jest-dom";) direto no arquivo de teste que funciona

[@JACKIECHANFILMES]

Muito boa a aula Diegão, as lives e top para mostra como e o dia dia, quando ficamos preso em algumas coisas simples as vezes kkk mas sempre acontece

[@luizoamorim]

Mais um excelente conteúdo, como tudo que fazem! Abraço!

[@andersonmichellin]

Diego parabéns pelo conteúdo.

[@cleysonsilva1828]

Que conteúdo sensacional mano, meus parabéns! Sua didática só aumenta com o tempo!

[@Mrsgmuller73]

Para quem está com problema no render, usem o npm install identity-obj-proxy --save-dev , depois no jest. config mudem o transform: { '^.+\\.(js|jsx|ts|tsx)$': '@swc/jest', }, e moduleNameMapper: { '\\.(css|less)$': 'identity-obj-proxy', },

[@iridium-x7i]

Diego parece o kakashi sempre explica muito bem sobre tecnologia.

[@elsonaraujojr]

Muito bom o conteúdo. Tive algumas dificudades justamente nos temas que ficou para próxima. Mocking API Calls (msw) Spies e Stubs Context (wrapper on render) Mais deu para aprender e muito com esse vídeo.

[@luimodotti]

Valew Diego, conteúdo muito bom. Seria legal ter um vídeo atualizado de como configurar o Jest para um projeto React-Native com Expo e Typescript... Estou sofrendo bastante com isso e não se acha nada atualizado na internet!

[@rflllucas]

Aula fantástica!

[@huanydourado1805]

Está com problema no userEvent. A nova forma de usar é assim: it("shold be able to add new item to the list", async () => { const { getByText } = render(); const addButton = getByText("Adicionar"); await userEvent.setup().click(addButton); expect(getByText("novo")).toBeInTheDocument(); }); Precisa usar o async e await

[@guilhermemaffei6532]

Muitissimo obrigado pelo seu comentário alma abençoada

[@GuilhermeAlmeida00]

Muito obrigado ² , alma abençoada

[@tassiosantos5693]

Vlw, mano ajudou muito.

[@wltech3460]

salvo mais um kkkkkkkkkkkkk😅

[@estagiariojs]

sem o setup() funciona de buenas

[@DEVLucasCS]

25:00 ate 35:00 instalação sem enrolação

[@Chillazzx]

Conteúdo incrível

[@alissonsantana4876]

Quem tiver algum erro basta instalar o seguinte pacote: npm install -D jest-environment-jsdom

[@henriquesathlerfs2464]

Salvou :)

[@johael]

Já passei por essa dor, depois de ficar mexendo no código por mais de uma hora, eu descobri que tinha quebrado em outro lugar, e agora pra descobrir em que momento quebrou foi doído rrsrrsrs

[@devlucasfernando]

caso o input fosse um outro componente, também deveria ser testado de forma isolada, e assim por diante né???

[@henriqueconzatti618]

consegui fazer o teste com rerender passar, ele espera o novo valor da propriedade, e não o componente, já que a função dele somente atualiza as propriedades. it('should render list items', async () => { const { getByText, rerender, debug, findByText } = await render(); expect(getByText('Diego')).toBeInTheDocument(); expect(getByText('Rodz')).toBeInTheDocument(); expect(getByText('Mayk')).toBeInTheDocument(); rerender(['Julia']); expect(await screen.findByText('Julia') ).toBeInTheDocument(); });

[@FerShibli]

Aonde eu posso encontrar a continuação? Não tô conseguindo encontrar... O item seguinte da playlist já é sobre outra coisa

[@lucasfrutig4945]

Existe uma porcentagem ideal de cobertura de testes pra front end?

[@PauloDaniel-di6vj]

Pessoal, foi feito a segunda parte desse video, falando sobre spies e stubs etc?

[@klsio2380]

Tive diversos problemas na hora de aplicar os testes , entrei na comunidade e ninguém me ajudou

[@Oculterous]

Fala deve aos 4:40

[@_flavio_silva]

Alguém sabe onde posso encontrar o código do video? :)

[@alessandrob.g.4524]

Man, how do you test onFocus for text input on RN using RTL?

[@mateustorquato5370]

Essa live teve continuação?

[@FreneticGamer]

Já fez a segunda parte? Se fez não estou achando alguém me da um help ai preciso muito do restante :)

[@gabrieldossantos2246]

Também queria saber. Não achei em lugar nenhum

[@moacir8663]

Qual é essa linguagem utilizada nos testes que já percebi ser a mesma linguagem para testes Angular e React? Isso é Typescript?

[@LucasCarvalho-fo1rt]

Javascript

[@rodolfoleal7295]

Início de fato: 21:22

[@guzz_7082]

Eu configurei aqui o jest baseado na config do video, mas como faço pra fazer o Jest interpretar SVGs ?

[@rafaelborges1633]

conseguiu descobrir?? hahah

[@devlucasfernando]

notei que os testem estão relacionado apenas a ui, e não ao que acontece por trás? testar front-end é isso mesmo?

[@RomuloAssis7]

De modo geral sim, geralmente se testa o contrato com o cliente. Rola de testar funções isoladas, mas pensa, no fim tudo irá impactar a UI, por isso é melhor garantir que o contrato está certinho.

[@matheusaraujo8617]

pretende fazer um vídeo sobra o suspense do react

[@thiagobraga676]

Estou com dificuldade de usar Jest com as variáveis de ambientes do Vite, ao rodar dá a mensagem: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node12', sendo que o tsconfig está com esnext.

[@Gabriel-qi1cv]

Tente : ctrl+shift+p -> Procure por 'restart' -> Escolha a opção: TypeScript: Restart TS server

[@elvesbrito9633]

Recebi esse erro no console ao executar o test O ambiente de teste jest-environment-jsdom não pode ser encontrado. Certifique-se de que a opção de configuração testEnvironment aponte para um módulo de nó existente.

[@elvesbrito9633]

Adicionei a lib jest-environment-jsdom e funcionou

[@jailsonsantos555]

@@elvesbrito9633 valeu

[@mathgsouza]

Esse video continuando a explicacao saiu ou virou lenda pessoal? hahaha

[@frank511]

Alguém mais ta com problema em fazer testes em projetos novos? no meu terminal ta acusando o erro: Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers.

[@podcaststv5091]

descobriu?

[@frank511]

@@podcaststv5091 sim, eram os arquivos css, por serem módulos eles causam conflito, no jest.config informei que eles deveriam ser permitidos e parou de dar erro

[@podcaststv5091]

@@frank511 massa, vou tentar

[@frank511]

@@podcaststv5091 Acrescenta isso no config moduleNameMapper: { '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|css|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/src/test/setup.ts' },

[@marcondesferreira8056]

Não está funcionando!

[@alexandrepereira5733]

Só deu erros aqui. não consegui usar o "userEvent"

[@teulolz]

Isso pq o modo que ele usa o userEvent não funciona mais na versão 14 do @testing-library/user-event, você tem que usar async/await e usar userEvent.setup(). Da uma olhada na documentação ta bem tranquilo de entender

[@jailsonsantos555]

@@teulolz valeu pela ajuda, eu alterei como falou olhando pela documentação, voltou a funcionar. thanks....

[@rubenfontes7085]

cara, é muita lib/pacote...

[@DEVLucasCS]

Ótimo pra programa depois de fuma uns becks kkkkkkkkkkkkkkkkkk

[@ideiax]

00

[@ramalho3439]

PARA DE BATER NA PORRA DO TECLADO kkkk

[@klsio2380]

Qual o Link da configuração do jest.config.ts ?

[@paulobordignon]

transform: { '^.+\\.(t|j)sx?$': [ '@swc/jest', { jsc: { parser: { syntax: 'typescript', tsx: true, decorators: true, }, keepClassNames: true, transform: { legacyDecorator: true, decoratorMetadata: true, react: { runtime: 'automatic', }, }, }, module: { type: 'es6', noInterop: false, }, }, ], },

[@thompsoncadu]

O @Fernando de Paula colocou nos comentários acima. Segue ai novamente: transform: { "^.+\\.(t|j)sx?$": [ "@swc/jest", { jsc: { parser: { syntax: "typescript", tsx: true, decorators: true, }, keepClassNames: true, transform: { legacyDecorator: true, decoratorMetadata: true, react: { runtime: "automatic", }, }, }, module: { type: "es6", noInterop: false, }, }, ], },