Explorando fireEvent no Jest DOM §

---

O fireEvent é uma funcionalidade essencial fornecida pelo Jest DOM para simular eventos em testes de componentes React. Ele permite que os desenvolvedores disparem eventos sintéticos em elementos DOM, facilitando a simulação de interações do usuário e a observação das respostas esperadas.

Uso básico §

Para utilizar o fireEvent, primeiro, é necessário importá-lo do pacote @testing-library/user-event:

import { render, fireEvent } from '@testing-library/react';
import '@testing-library/user-event';

Em seguida, pode-se usá-lo para simular diferentes tipos de eventos em elementos. Por exemplo, para simular um clique em um botão:

it('should call function on button click', () => {
	const fn = jest.fn():
	render(<Button text="Load more" onClick={fn} />);
 
	const button = screen.getByRole("button", { name: /load more/i });
	fireEvent.click(button);
	expect(fn).toHaveBeenCalledTimes(1);
});

Nota

Como alternativa ao fireEvent é possível usar a userEvent, a principal diferença entre elas é que a userEvent ela “simula” um usuário que em alguns cenários pode ser mais interessante.

O fireEvent suporta uma variedade de eventos, incluindo clique (click), foco (focus), mudança (change), entre outros. Aqui está um exemplo de como simular a digitação em um campo de entrada:

O fireEvent cria eventos sintéticos que imitam o comportamento real do navegador, proporcionando uma maneira confiável de testar a interação do usuário em componentes React. Essa abstração ajuda a garantir que os testes se alinhem com o comportamento esperado da aplicação.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)