No vídeo passado a gente aprendeu a usar o to be defined. Esse matcher é usado para verificar se qualquer coisa que você passou é definida. O que é que significa? Significa que não é undefined. A coisa que você passou não é undefined. To be defined significa isso. Se você quiser saber mais sobre esses matches, olhe na documentação API do Jest. Acessão expect matches. Continuando os nossos testes. Salva aqui. Deve ter dado o ímpodo undefined. Porque? Acho que eu esqueci de voltar esse cara. Atenção no nome de novo. Onde os testes passaram. Ok. Só resta esse um change. Vamos lá? Mais um teste. Deve ter dado o prop. Um change para input. Ah, o input. Então, vamos encontrar o input de novo. Vou copiar. Compone find input. Prop. Web prop. Um change. O que é que a gente espera? Expect. Essa prop. Se é definida e se é o que? Se é esse cara aqui. Essa é a função de smoque. O que a gente passou esse um change como props para esse cara. Então deve ser também passada para o input. Para esse cara aqui. Vamos lá? Primeiro de tudo ser definido. E depois de ser prop.onchange. Detetive. Eu estou usando esse cara porque no vídeo passado já expliquei. Se eu tivesse. Porque poderia ser que esse cara seria indefinido. E ainda o teste já passava. Então por que define? Esperamos que o onchange seja definido. Tem que ser definido. E tem que ter esse valor. Prop.onchange. Que são dados como props. Al. Input text. Essa props. Al. Input text. Certo? Não salvar. E vamos testar. Passaram os testes. Vamos fazer falhar. Emove onchange. Se alguém, se você estivesse implementado. Sendo o onchange. Vai falhar. Tem que definir cara. Define. Agora se eu definir como um valor string. Está definido mais. É incorreto, né? Cadê? Falhou. Esperou a função. Mais recebeu string. Está errado. Então corrige. Passa o onchange. Dado por props. Que é uma função. Tudo legal. Certo? E assim a gente termina de. Testar. Pela presença das props. Dada ao input. Certo? E agora? Que mais a fazer? A gente pode testar. Se tiver o label presente. Ou não? Certo? Pode testar até o estilo se quiser. Pode testar se tem uma dev. Assim por diante. Depende de você quais testes você quer. Fazer e acho que é importante. Então para ilustrar como se encontram esses caras aqui. Como é que dá um traverse. No DOM usando o enzyme. Eu vou fazer o teste para a presença desse label. Vamos lá. Test deve ter um label. A mesma vez deve ter o input. Deve ter um label. Vamos lá. Component Find Label. Certo? Certo? Ponto Length. Expecto que. Te vi um. Mesma coisa, quase a mesma coisa desse. Só mudo esse aqui. Vamos lá. Legal. Mas... Vamos ver o que acontece. Vamos supor que eu queria o label ser viciante do input, mas não depois. Esse teste não importa se o label está aqui ou está aqui. Vai passar do mesmo jeito. Então para isso, talvez no modo de testar, vamos tentar outra coisa aqui. Vamos expect também que. Component Find. Em vez de ver esse cara, eu vou ver o PIDELABEL. Final Dev. Encontrei a Dev. Mas tem essa função aqui chamado Children. Que dá aos filhos do dev. Qual é a length? Vai ser 2, né? Só para ver se está funcionando esse cara. To be 2. Porque tem 2 filhos. Um input e o label. A função vai dar aos filhos da dev. As nodes que são filhos da dev. Opa, 3. Mais o que aconteceu? Não só tinha 2. Ah, e esse cara aqui? Viche. Será que é um children também? É sim. Vamos remover. Test passou. Vai ser o adicionar esse cara. Agora tem 3. Esse que é um node. Esse que é outro node. Entendeu? Tem esse detalhe. Certo? Até eu às vezes esqueço disso. Mas é um node também. O white space aqui. Está fora do label. Então é outro separado. Então. Em vez de C2, muta 3. E vai dar certo. Mas a gente estava testando o children. Eu não quero saber do link. Se você quiser saber, pode botar link 2. Mas não quero saber. Então o que eu quero? Eu quero ver se o label está depois do input. Desculpa, antes do input. Nesse caso está errado aqui. Então vamos lá. Children, mas tem 2 né? 3 quer dizer. Como é que a gente acessa o input? O primeiro? O filho vai ser o que? Eu ponto first. Tá bom? Eu vou dar children first. To be, o que? Label. Vamos ver se funciona. Ah, não funciona. Não funciona. Não funciona. Ah, não funciona. Porque estou comparando 1 node com 1 string. Está errado. Então tem esse método chamado text. Por exemplo. Entendeu? Tem HTML. Certo? Só a backup estou capturando aqui. Se for muita coisa. Essa função children dá os filhos da div, as nodes. Nesse caso 1, 2, 3. E para achar a primeira ponto first vai pegar a primeira. Nesse caso vai ser esse cara. Tem essa função text, o HTML. O HTML vai retornar o HTML desse cara renderizado aqui. Nesse caso, se você ver. Sim, tá bom? Um input type text, nome, não sei o que. Esse HTML. Mas também o text. Text vai dar o texto dentro do dentro da elemento. Nesse caso não tem nada. Porque já está fechado aqui. Recebeu nada. Mas eu estou curioso. Será que acontece alguma coisa se eu botar aqui? Fazer assim. Eu não... meio esquisito. Será que funciona alguma coisa? Ah, entendeu? Eu botei esse cara dentro do tag, do elemento. O text retorna o texto dentro do elemento, entre as tags. Entre os tags e está aqui. Entendeu? Mais um volta. Mas como é que a gente vai pegar esse cara? Puts. Como é? Vamos dar um console log aqui. Que eu não estou em. Às vezes a gente não sabe o que está acontecendo. Nem eu sei, às vezes, o que está dentro desses objetos. Então vou dar um console log aqui. Vou copiar esse cara aqui. Antes, vou dar um console log. Do children. First. Para você olhar o que é que tem dentro dessa node. Cynotic, shallow wrapper. Monde de coisa que eu nem entendo muito. Mas tem essa node. Div. Length 1. Tem essa outra node. Cynotic Props. Type text. Names. Esse cara aqui. Que está dentro aqui. E o type input. Entendeu? Várias coisas. Se quiser dar uma olhada da documentação do enzyme shallow wrapper. É aqui. Mas vamos tentar outra coisa aqui.