Um momento
Aula 78
Cursos / React: Componentes Controlados
Aprendemos a Usar o findWhere() em vez do find()

Summary

Resumo do Transcript sobre o Enzyme e findWhere

Neste vídeo, é discutido um problema encontrado com o Enzyme na versão 2.8, onde a utilização de colchetes ([]) dentro do valor do atributo name causa falhas. A solução apresentada é a adoção da função findWhere em vez do método find para localizar componentes.

Problema Identificado

  • A versão do Enzyme usada é a 2.8.
  • A presença de colchetes nos valores de atributos, como o name, causa problemas na busca de componentes.

Solução Proposta

  • Usar a função findWhere que permite passagem de uma função como argumento.
  • A função anônima deve retornar uma condição que determina se um nó deve ser incluído na seleção.

Exemplificação:

  • A condição desejada é encontrar um nó cujo atributo name seja igual a "frutas".
  • Um exemplo de uso de findWhere é mostrado, junto com um console.log para visualizar os nós encontrados.

Implementação

  • O uso de findWhere é demonstrado, destacando a busca por nós que satisfazem a condição.
  • Depois de implementar a nova abordagem, é verificado se os testes estão passando.
  • O teste falha temporariamente ao remover um colchete, mostrando como o valor esperado não é encontrado.
  • Retorna-se o código para sua implementação anterior para que os testes passem novamente.

Considerações Finais

  • O vídeo conclui lembrando que o findWhere é recomendado sobre o find em situações como essa.
  • A versão atual do Enzyme mencionada é a 2.8, sendo que já existe uma versão 3 disponível.

Até o próximo vídeo, onde mais testes para a inclusão do checkbox list serão escritos.

Video Transcript

Então esses coxetes aqui é a causa do problema aqui que a gente está tendo. Na verdade eu dei uma olhada ali na pesquisa e encontrei que é um problema do Enzyme, dessa versão aqui que eu estou usando, deixo de ir aqui para o package.json para ali informar Nesse vídeo a gente está usando o Enzyme versão 2.8 e nessa versão pelo menos se você tem o nome da propriedade e tiver coxetes dentro do valor do nome vai dar problema. Então vamos aqui no navegador para ele mostrar a página aqui do GitHub do Enzyme, GitHub.com.br, Airbnb.Enzyme, tem até o eixo que é o número 1019, se você quiser dar uma olhada, esse aqui que é o problema que a gente está tendo. O eixo aqui já foi fechado e eles recomendam usar o findware em vez do find para a gente poder encontrar o nosso componente lá. Então é isso que a gente vai fazer, a gente vai usar esse findware agora, é outra maneira de a gente encontrar o que a gente está procurando. A gente já vem usando o find com selector, mas agora é hora de a gente aprender uma nova função do Enzyme, do shallow wrapper aqui, o findware. Então vamos lá, voltando aqui ao editor de texto, esse cara tem problema, então vamos resolver esse problema de outra maneira. Então em vez de usar o find eu vou usar o findware, tá bom? Esse findware aqui ele leva argumento, uma função, a função aqui, o parâmetro é a node, o Enzyme wrapper, e você tem que retornar uma condição para que a node seja incluída nessa lista de componentes que você vai achar. Deixa eu lhe dizer aqui, então esse cara findware significa encontre todas aquelas nodes que satisfazem essa condição que a gente vai retornar dessa função aqui determinada como argumento. Nesse caso a gente quer que encontrar aquela node cuja prof, name, desculpa aqui, deixa eu mudar o, a prop name, tem o valor que? frutas com sscorchates, certo? Deixa eu quebrar a linha aqui, deixa eu termo a ver esse cara aqui para você ver melhor. Eu vou criar uma variável chamado checkbox aqui para poder fazer esse cara. Vamos dar uma olhada aqui novamente, você vai dar um findware, passa aqui uma função como argumento, o parâmetro dessa função anônima é a node. Então ele vai dar uma olhada em todas as nodes do componente aqui que estão dentro do componente formulário e se a node, ele encontrar uma node que satisfaça essa condição nesse caso, por favor, quero que você encontre uma node cuja prop name tenha valor esse cara aqui. Então ele está procurando esse cara cuja prop tem o valor frutas e vai dar a bater nesse cara aqui, certo? Para você poder ver como o findware se realmente está funcionando eu recomendo você dar um console log aqui dessa maneira aqui, deixa eu te mostrar, eu vou copiar esse componente findware aqui só para me mostrar como ele realmente vai olhando em todas as nodes. Eu vou dar um console log do componente findware node, mas a condição aqui eu vou passar true e sempre vai retornar true, nesse caso vai retornar todos os nodes que o findware olhou. Aí também vamos dar um map para cada node, eu quero o nome da node, só para poder visualizar. Vamos lá no terminal, você note aqui o console log, essa aqui foram os nomes de cada node que foram encontrados pelo findware, o form, o h4, um node aqui que talvez seja o node de texto, sei lá, o node que não tem nome, input text, br, checkbox list, note que esse cara que a gente quer achar, label e vai assim por diante. Então isso confirma que o findware realmente está dando um olhado em todos os caras e vai somente retornar aqueles cuja condição retornada pela função anônima é verdadeira, aquele valor verdadeiro. Então vamos ver se o node tem valor ou frutas, vamos verificar se realmente esse cara existe. Vou salvar aqui, vamos dar um olhado no terminal, nos testes, todos os testes estão passando, devem incluir checkbox pelo canaple de frutas, vamos só verificar se realmente está realmente sonando aqui, vamos remover esse coxete que fecha essas frutas e salvar da implementação aqui embaixo para ver se realmente deu erro, note que deu erro, esperava que receber esse valor 1, mas recebeu 0, então não encontrou nem o cara que tem os dois coxetes porque realmente não tem, é só um aqui, então tem que adicionar de volta aqui, revertendo a implementação para os testes poderem passar novamente, certo? Então esse é o findware que a gente aprendeu aqui porque a gente não podia usar os coxetes dentro do valor da prop, que é a maneira que a gente já fez anteriormente, e até lá na página do ish, do gethub, esse cara aqui, o ljharv, ele recomenda também que você use o findware e vale melhor que usar o find com o nome do componente. Isso eu estou usando novamente, o enzyme, versão 2.8, já está a versão 3, então, por isso é só, certo? Então até o próximo vídeo onde a gente vai continuar, a gente vai escrever os testes para a inclusão, verificar a inclusão do checkbox list, até lá.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: