Aula 78
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 umconsole.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 ofind
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: