Depois dessa breve discussão sobre o Jest, a gente plana de começar os KB tests para os nossos componentes. Eu não vou publicar o Enzyme por si mesmo porque eu acho que é melhor que a gente aprenda na hora que a gente estiver escrevendo os testes para cada componente. Então a gente pode começar por um desses componentes aqui, escolhendo, vamos lá para o input text, vamos fazer esse cara primeiro. Então, normalmente eu crio uma pasta para armazenar todos os testes. Eu fiz de testa aqui, mas normalmente eu não faço isso, vou deletar esse cara. Eu crio pasta de test, sei lá, dentro da... Aqui em geral, pode ser do SCRC. Eu chamo de test, outras pessoas, pode chamar de outras coisas. Acho que o padrão do Jest é com underscore test, sim. Deixa eu dar uma olhada aqui. Acho que eles gostam de... É, aqui. Põe esses testes nessa pasta, ou qualquer um... Mas tem que ir ao minha.test.js ou.spec.js. Eu gosto de escrever .test.js, então vamos lá. Eu posso seguir a maneira deles e criar essa pasta, ou posso definir a sua própria pasta, depende de você. Vou criar aqui testes, certo? E vou criar aqui, eu estou testando o componente input text, então vou botar o mesmo nome, .test.js, certo? Normalmente eu gosto de criar pasta dentro do teste para refletir a mesma estrutura de fora dos componentes aqui. Então vou botar componentes, como da mesma maneira que a gente tinha aqui, e vou adicionar esse cara aqui, certo? Vou botar input text dentro da pasta common, que está dentro da pasta component, parte do teste, para refletir a mesma estrutura aqui. Então vamos lá. Deixa eu botar aqui o cara de lado a lado. Split view pane, split right. Quero que você veja o componente aqui do lado. Entendeu? Deixa eu dar um wrap, soft wrap para quebrar a linha. Então testando componentes. Primeiro de tudo, você não, você assume que já são dados as props, você não vai testar se certa prop foi dada ou não. Isso é o papel do componente pie, do parent, né? Nesse caso, o pie do input text é o formulário. Então testar se o input text foi dado certas propriedades, mas é o papel do formulário e não do próprio componente, certo? Não se porte em testar as propriedades dadas a esse componente. A gente vai assumir, a gente vai fazer, a gente tem que só ver o que está dentro do componente, não o que vem de fora, certo? Então vamos aqui. Primeiro de tudo, vai ter que ter o react, porque a gente vai montar o componente, certo? Normalmente eu ponho describe para o nome do componente, nesse caso input text. Se quiser adicionar component, componente. Aqui. Deixa eu aumentar. Dá para ver ou não? Certo? Então a descrição, é só uma função para definir e vamos botar o testes todos aqui. Tem várias coisas para testar aqui. Pode testar se encontrou o input e se esse input foi dado dessas propriedades. Certo? Nesses casos das propriedades, o pie do input vai ser o input text. O input text vai ter esses caras, por isso a gente vai checar essas propriedades, se foram corretamente certadas. Por exemplo, se alguma pessoa fez um... teve um botão number, mas está errado, não é number, esse cara tem que ser text. A gente vai testar as outras coisas. A testar também talvez se tem um label ou não. Vamos lá. Vamos começar a assar o com o input para você ver como funciona o enzyme. Test. Estou em dúvida que se escreve inglês ou português. Normalmente inglês escreve should, não sei o que. Eu não sei como é o português. Deve? Então vamos lá. Deve, eu escreveu, tenta alguma coisa aqui. Se você tiver um padrão da definição do string do test, por favor. Deve ter um input. Se fosse inglês, eu ia dizer, eu ia falar should have an input. Então, a gente vai usar o enzyme. Primeiro de tudo, a gente tem que montar o componente. A maneira que faz isso é usar a função shallow do enzyme. Certo? Essa é a função shallow. Para usar essa função, vamos importar shallow. Então, enzyme. Eu não sei nem se o enzyme já está instalado. Mas vamos tentar. Não sei se o create react app já instalou o enzyme por padrão. Então vai dar o shallow e você faz o componente. Esse caso é input text. Mas a gente não definiu. Então tem que importar também. Import. O que? Input text. Da onde? Vamos ver aqui. Já que está o input text. Univo acima, um nível acima, um nível acima. Component. Barra common. Né? Certo? Import. Input text. Da de lá. Agora está definido. É bom estar o componente, mas a gente quer botar isso em uma variável. Para não poder ter que digitar isso todo o tempo. Só montar uma vez. O escala do enzyme digita o wrapper. Eu gosto de digitar component. É mais intuitivo. Certo? Então, monta o componente usando shallow. Você tem que importantes usar shallow aqui porque o shallow ele não vai montar os componentes que estão dentro do input text. Componentes que estão nestes. Por exemplo, nesse caso é bem simples, mas se você tivesse aqui, por exemplo, outra coisa que outro componente, mais outro componente. Com shallow, quando montar o input text, vai montar esses caras aqui, mas esses caras aqui não vão ser montados. Só vai aparecer assim. Só vai aparecer assim. Só o nome. Isso é importante porque você só quer testar esse cara, o input text. Você não quer testar esse cara. Para isso, você vai escrever outros testes em outro arquivo. Então, é importante você separar isso e não ficar escrevendo testes que é para uma coisa, mas você está testando outra coisa. Então, é importante testar uma coisa só. As outras coisas, você testa com outros testes. Outra... Então, usa shallow. Não usa mount não, mas não usa esse cara aqui. Tente não usar. Esse mount vai montar esses componentes que estão já dentro do input text. E vai montar tudo. A gente não quer isso. Então, usa shallow. Vou voltar aqui.