Ir para o conteúdo principal

Considerações sobre fireEvent

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Interações vs. eventos​

Com base nos Princípios Orientadores, seu teste deve assemelhar-se à forma como os usuários interagem com seu código (componente, página, etc.) tanto quanto possível. Com isso em mente, você deve saber que fireEvent não representa exatamente como o usuário interage com sua aplicação, mas é suficientemente próximo para a maioria dos cenários.

Considere fireEvent.click, que cria um evento de clique e despacha esse evento no nó DOM fornecido. Isso funciona corretamente na maioria das situações quando você simplesmente quer testar o que acontece quando seu elemento é clicado, mas quando o usuário realmente clica no seu elemento, estes são os eventos normalmente disparados (em ordem):

  • fireEvent.mouseOver(element)

  • fireEvent.mouseMove(element)

  • fireEvent.mouseDown(element)

  • element.focus() (se esse elemento for focalizável)

  • fireEvent.mouseUp(element)

  • fireEvent.click(element)

E então, se esse elemento for filho de um label, ele também moverá o foco para o controle de formulário que o label está rotulando. Portanto, mesmo que tudo o que você realmente queira testar seja o manipulador de clique, ao usar apenas fireEvent.click você está perdendo vários outros eventos potencialmente importantes que o usuário dispara durante o processo.

Novamente, na maioria das vezes isso não é crítico para seus testes, e a relação custo-benefício de simplesmente usar fireEvent.click vale a pena.

Alternativas​

Descreveremos alguns ajustes simples em seus testes que aumentarão sua confiança no comportamento interativo de seus componentes. Para outras interações, você pode considerar usar user-event ou testar seus componentes em um ambiente real (por exemplo, manualmente, automaticamente com Cypress, etc.).

Keydown​

Um keydown é despachado no elemento atualmente focalizado, no elemento body ou no elemento document. Seguindo isso, você deve preferir

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

Isso também testará se o elemento em questão pode realmente receber eventos de teclado.

Focus/Blur​

Se um elemento é focalizado, um evento focus é despachado, o elemento ativo no documento muda, e o elemento previamente focalizado é desfocado (blur). Para simular esse comportamento, você pode simplesmente substituir fireEvent pelo foco imperativo:

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

Um efeito colateral positivo dessa abordagem é que qualquer asserção sobre eventos focus disparados falhará se o elemento não for focalizável. Isso é especialmente importante se você fizer um evento keydown em seguida.