Resumo do Transcript: Testes com Jest no React

Como eu disse antes, já tem um comando de teste já definido aqui pelo React Scripts, que na verdade está usando o Jest. Vamos para a linha de comando para rodar o comando de npm test. Você rodar, ele vai rodar o Jest no modo de Watch, que vai... Nesse caso, não tem teste que foram modificados desde a última vez que os testes foram rodados. Vamos apertar A para rodar todos os testes. A... Vai rodar os testes que já tem, só tem um teste para o app, Renders Without Crushing, e passou Test Suite, Testes, tudo ok. Volta aqui, cadê esse teste? Onde será? Isto. Aqui, app.test.js, rodou esse teste aqui. Renders Without Crushing. Nesse tempo diante, pega o Andive, crie o Andive, injecta... Adive, injecta o app na Andive, e sim por diante. Vamos falar mais nisso. Depois, vamos focar aqui no Jest, vamos abrir... Vamos criar um arquivo aqui, só para demonstrar o Jest. Vou chamar meu teste.test.js. Normalmente, os testes são escritos com esse suffix .test.js. Normalmente, você nomeia o seu teste no mesmo nome de componente, se for teste de componente. Nesse caso, se eu tivesse o componente chamado meu teste, esse seria o teste para aquele componente chamado meu teste, mesmo nome. Então, a palavra chave importante para o unit test singular no Jest é o test, essa função aqui. No Jest, é o x, mas aqui é test. Então, você vai testar, primeiro argumento para a função é a descrição do teste. Por exemplo, e a segunda argumento é uma função, eu vou usar a função de flash que define o teste. Vamos definir esse teste muito simples, vamos dizer que adiciona dois, mais um vai ser três. Então, dentro da definição do teste, normalmente, o que você quer fazer é expect.expect. Então, o expect que é o chamado assertion library, without attack of assertion, já é incluída no Jest, por isso não precisa importar. Então, já é incluída. Então, a gente expect o quê? Dois mais um, two, three. Mas esperamos que dois mais um sejam três. To be é o chamado matcher. Tem vários matchers no Jest, nesse caso, a gente está usando to be matcher. A gente espera que esse cara seja o valor dado ao to be. Certo? Então, salvar, vamos ver se roda esse teste. Então, no final, eu vou portar a senorte que meu teste passou, já adicionou lá. Eu estou rodando no watch mode, mas se você quiser rodar, você pode instalar o Jest globalmente e rodar o arquivo individual Jest. Cadê? S-R-C, meu teste. Ah, eu não tenho, né? Mas se vai global, vai funcionar assim. Eu tenho aqui dentro do Node Modules, cadê? Deixa eu rodar o Jest do Node Modules. Aqui dentro dessa parte aqui, tem o Jest, que é o local, bin, Jest. Se você fosse rodar aqui, Node, no seu que, o arquivo, cadê? S-R-C, meu teste. Ele roda o teste individual. Certo? Voltando aqui, vamos fazer o teste falar, só para demonstrar que funciona. Você que está errado, mas a gente vai ver aqui, dois, nós esperamos dois que seja três, e vai falhar, né? Ah, falhou. Esperamos que três, o valor dado que foi três, seja dois, o valor recebido que seja dois. Então, falhou. Se eu rodar via NPM test, roda tudo, já está aqui, né? Roda todos os testes. Um falhou, um passou da test suite, mas em geral foram dois, certo? E quanto tempo levou o estimado? Outra maneira também de rodar só um teste, se você tiver vários testes, e eu adicionei, copiei os testes, tem vários testes, né? Os três, se você notar que tem tanta coisa aqui, se você quer focar só em um teste, você pode, em vez de rodar o GES, naquele aí. Você roda o GES em um arquivo, mas tiver muitos arquivos, vai rodar tudo, mas se tiver vários testes dentro de um arquivo, você pode usar esse aqui, teste.only, para rodar só esse teste, todos os outros serão esquiapados, né? Vamos mudar essa string aqui, só para alguma coisa, para demonstrar que funciona. Aperta A, você note que só roda esse cara, esse teste, e todos os outros foram esquiapados, porque a gente botou o point only, está muito? Não se esqueça desse point only, quando você estiver criando seus testes, você só focar em um teste, adicionar o point only, e rodar os comandos, só vai rodar aquele teste, quando tudo dá certo, remove quando terminar de escrever o teste, não se esqueça de remover. Aí vai rodar tudo de novo. Certo? Vamos tirar esse cara. Outros methods, por exemplo, vamos ver, tem... Tem vários methods, vamos olhar na documentação aqui, vai na API. A API, que são os methods, eu acho que... Aqui, que a minha tela está pequena, mas se eu aumentar, dá para ver aqui o expect, da API, tem todos os matchers aqui, to be, é o que a gente usou. Eu também, to have been called, esse aqui é para checar assim, uma função foi chamada, uma mock function, e eu gosto de usar to be, to match, esse to match, vai procurar pelo teste, usando a expressão regular, e também o to match object, o object se estiver, se for um sub-object do outro. Esse aqui não checa para ser o object, que seja recursivamente igual, mas ele checa se as propriedades de um object são contidas em outro object, nem que aquele object tenha mais propriedades do que você espera. Isso pode ver aqui, dá uma olhada nos exemplos. Certo? Eu não quero perder muito tempo com isso, que a gente vai olhar quando a gente for fazer o test para os nossos próprios componentes. Então outra coisa, outra palavra-chave aqui, se você quer organizar os seus testes, é a describe, se você tiver muito testes e está muito... Você quer organizar, normalmente você usa describe, normalmente eu uso describe para cada função que eu estou testando, ou cada componente, assim por diante, por exemplo, adicionar a função chamada adicional e fazer um describe assim, primeiro argumento é a descrição, segundo é a função, vou passar a função de flash, e dentro desse describe, ponho os testes, vou mover esse teste para dentro do describe, perdeu? E assim... E esse cara aqui fica fora, vamos mudar esse string para alguma coisa, subi, tráe, 3 e 2, adiciona 1 mais 1 e dá 2, 1 mais 1 e dá 2, corre de os testes, e assim por diante. Você pode botar a função aqui, eu não definei nenhuma função para você esperar o expect, porque eu não quero perder tempo, mas se quiser criar uma função aí, por favor, faça. Então aqui, esses testes estão dentro do describe, o bloco de describe chamada adicionar, se essa tivesse uma função adicionar, eu... Quando rodar o teste, senors... O que é isso? Subi tráe 3 e 2, 2 de 3, 3 é 1, sei lá, certo, então, pass, pass, runautasweets, eu passo, é que não dá para ver o que esse describe bloco, mas vamos falar aqui, que eu quero ver, demonstrar que aparece o adicionar, para você ver aqui, então ele mostra adicionar, adiciona 2 mais 1 e dá 3, adicionar, então tem sempre esse adicionar aqui do bloco, e fica mais fácil de ler e mais fácil de organizar os testes, em diferentes sessões, como esse教 inequality ah bom,