Skip to main content

Considerações para a fireEvent

Interações vs. eventos​

Baseado nos Princípios Orientadores, o teu teste deveria assemelhar-se a como os utilizadores interagem com o teu código (componente, página, etc.) o máximo possível. Com isto em mente, deverias saber que fireEvent não é exatamente como o utilizador interage com a tua aplicação, mas é próximo o suficiente para a maioria dos cenários.

Considere a fireEvent.click, a qual cria um evento de clique e despacha este evento sobre o dado nó do DOM. Isto funciona apropriadamente para a maioria das situações quando simplesmente queres testar o que acontece quando o teu elemento é clicado, mas quando o utilizador realmente clicar no teu elemento, são estes os eventos que são normalmente disparado (em ordem):

  • fireEvent.mouseOver(element)
  • fireEvent.mouseMove(element)
  • fireEvent.mouseDown(element)
  • element.focus() (se este elemento for passível de foco)
  • fireEvent.mouseUp(element)
  • fireEvent.click(element)

E então, se acontece que aquele elemento é um filho de um label, então também moverá o foco para o controlo de formulário que o label está rotulando. Assim muito embora que tudo o que realmente estás a tentar testar é o manipulador de clique, ao simplesmente usar fireEvent.click estás a perder muitos outros eventos potencialmente importantes que o utilizador está disparando ao longo do caminho.

Novamente, na maior parte das vezes isto não é crítico para os teus testes e o compromisso de simplesmente usar fireEvent.click vale a pena.

Alternativas​

Nós descreveremos alguns ajustes simples para os teus testes que aumentarão a tua confiança no comportamento interativo dos teus componentes. Para outras interações podes querer tanto considerar usar user-event ou testar os teus componentes em um ambiente de verdade (por exemplo, manualmente, de maneira automática com cypress, etc.).

Keydown​

Um keydown (pressionar de tecla) é despachado no elemento focado atualmente, o elemento do corpo ou elemento do documento. Seguindo isto deverias preferir:

- fireEvent.keyDown(getByText('click me'));
+ getByText('click me').focus();
+ fireEvent.keyDown(document.activeElement || document.body);

Isto também testará que o elemento em questão pode mesmo receber eventos de teclado.

Focus/Blur​

Se um elemento for focado, um evento de foco é despachado, o elemento ativo no documento muda, e o elemento focado anteriormente é desfocado. Para simular este comportamento podes simplesmente substituir a fireEvent com o foco imperativo:

- fireEvent.focus(getByText('focus me'));
+ getByText('focus me').focus();

Um efeito colateral agradável desta abordagem é que qualquer afirmação sobre os eventos de foco disparados falharão se o elemento não for possível de foco. Isto é fundamentalmente importante se segues com um evento de pressionar de tecla.