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",
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()
consegui, removi o module.exports, e acrescentei setupFilesAfterEnv: ['@testing-library/jest-dom'], testEnvironment: 'jsdom', após o transform dentro de config mesmo, rodou liso
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
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
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á 😃😃😃😃
"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
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.
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', },
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.
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!
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
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
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();
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.
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.
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 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 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' },
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.
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
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,
},
},
],
},
Guerreiro humilde
Obrigado, amigo, você é um amigo
GOD DEMAIS !
Dev amigo, obrigada!
Esse é meu mininu
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",
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()
consegui, removi o module.exports, e acrescentei
setupFilesAfterEnv: ['@testing-library/jest-dom'],
testEnvironment: 'jsdom', após o transform dentro de config mesmo, rodou liso
@@henriqueconzatti618 salvou demais mlk hahah
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!
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
Para quem estiver vendo esse video, se atente a documentação, pois algumas mudaram. Como por exemplo a utilização do userEvent.
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
Cheguei tarde e perdi um pouco, agora rever e consumir bons conhecimentos
Era o que precisava agora JEST e Testing-library com REACT
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á 😃😃😃😃
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.
25:00 ate 35:00 instalação sem enrolação
"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
kkkkk.. Verdade!
ter que arrumar um código que estava funcionando é depressão dms
a pessoa faz com um erro bobo tipo o remover tá escrito remoer e mil pessoas viram isso, as vezes acontece muito
Por mais que trabalhe com isso, ainda não consegui criar gosto por testes
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.
Mais um excelente conteúdo, como tudo que fazem! Abraço!
Diego parabéns pelo conteúdo.
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
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',
},
Que conteúdo sensacional mano, meus parabéns! Sua didática só aumenta com o tempo!
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.
Quem tiver algum erro basta instalar o seguinte pacote:
npm install -D jest-environment-jsdom
Salvou :)
Aula fantástica!
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!
Diego parece o kakashi sempre explica muito bem sobre tecnologia.
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
Muitissimo obrigado pelo seu comentário alma abençoada
Muito obrigado ² , alma abençoada
Vlw, mano ajudou muito.
salvo mais um kkkkkkkkkkkkk😅
sem o setup() funciona de buenas
Conteúdo incrível
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
caso o input fosse um outro componente, também deveria ser testado de forma isolada, e assim por diante né???
Aonde eu posso encontrar a continuação? Não tô conseguindo encontrar... O item seguinte da playlist já é sobre outra coisa
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();
});
Fala deve aos 4:40
Pessoal, foi feito a segunda parte desse video, falando sobre spies e stubs etc?
Man, how do you test onFocus for text input on RN using RTL?
Existe uma porcentagem ideal de cobertura de testes pra front end?
Já fez a segunda parte? Se fez não estou achando alguém me da um help ai preciso muito do restante :)
Também queria saber. Não achei em lugar nenhum
Alguém sabe onde posso encontrar o código do video? :)
Qual é essa linguagem utilizada nos testes que já percebi ser a mesma linguagem para testes Angular e React? Isso é Typescript?
Javascript
Início de fato: 21:22
Essa live teve continuação?
Tive diversos problemas na hora de aplicar os testes , entrei na comunidade e ninguém me ajudou
notei que os testem estão relacionado apenas a ui, e não ao que acontece por trás? testar front-end é isso mesmo?
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.
Eu configurei aqui o jest baseado na config do video, mas como faço pra fazer o Jest interpretar SVGs ?
conseguiu descobrir?? hahah
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.
Tente : ctrl+shift+p -> Procure por 'restart' -> Escolha a opção: TypeScript: Restart TS server
Esse video continuando a explicacao saiu ou virou lenda pessoal? hahaha
pretende fazer um vídeo sobra o suspense do react
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.
descobriu?
@@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
@@frank511 massa, vou tentar
@@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'
},
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.
Adicionei a lib jest-environment-jsdom e funcionou
@@elvesbrito9633 valeu
Não está funcionando!
Ótimo pra programa depois de fuma uns becks kkkkkkkkkkkkkkkkkk
Só deu erros aqui. não consegui usar o "userEvent"
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
@@teulolz valeu pela ajuda, eu alterei como falou olhando pela documentação, voltou a funcionar. thanks....
cara, é muita lib/pacote...
00
PARA DE BATER NA PORRA DO TECLADO kkkk
Qual o Link da configuração do jest.config.ts ?
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,
},
},
],
},
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,
},
},
],
},