2
respostas

[Bug] Erro: TypeError: Cannot read properties of null (reading 'textContent')

Boa tarde, estou no mód 02 aula 06. Me deparei com esse erro ao tentar acessar o elemento do DOM('.like-counter'). Segue meu código

it(`(D) Should display number of likes when (@Input likes) is incremented `, ()=> {
      fixture.detectChanges();
      component.likes++;
      fixture.detectChanges();
      const element:HTMLSpanElement = fixture.nativeElement.querySelector('.like-counter  ');
      expect(element.textContent.trim()).toBe('1');
    });

O erro que aparece no KARMA

PhotoFrameComponent > (D) Should display number of likes when (@Input likes) is incremented
TypeError: Cannot read properties of null (reading 'textContent')
TypeError: Cannot read properties of null (reading 'textContent')
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/shared/components/photo-frame/photo-frame.component.spec.ts:54:22)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:292:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:363:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:123:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:545:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:560:1)
    at <Jasmine>

Alguma solução? Olhei no fórum vi outras pessoas com o mesmo erro mas a solução delas n serviu para mim.

2 respostas

Oii, João! Tudo bem?

Lamento, João, que as outras soluções do fórum não se ajustaram ao seu contexto. Isso é normal e o erro pode ser causado por vários motivos, não se preocupe, vamos buscar outras. Um dos motivos desse erro ocorrer é porque o elemento não foi renderizado ou atualizado corretamente após as mudanças no componente.

Sendo assim, é interessante que verificar se o elemento .like-counter está presente no template do componente e que a lógica para renderizá-lo está correta. O Angular pode não ter atualizado o DOM imediatamente após fixture.detectChanges(). Como sugestão pode-se usar o await fixture.whenStable() para aguardar a estabilidade das mudanças. Esse código vai aguardar o Angular terminar de aplicar todas as mudanças necessárias no DOM. E outro ponto é revisar a classe usada no seu arquivo CSS, erros de sintaxe como espaços adicionais ou de digitação podem causar alguns bugs.

Espero que as sugestões te ajude!

Bons estudos, João!

Boa tarde! Obrigado pelas dicas, acabei avançando e baixei a versão do módulo 04 e não possuía esse erro, baixei o zip e carregou aqui. Obrigado novamente pela resposta rápida e pelas dicas.