Explorando userEvent no Jest DOM


O userEvent é uma biblioteca que estende as funcionalidades de simulação de eventos do Jest DOM, proporcionando uma abordagem mais próxima das interações do usuário com os componentes React. Ao contrário do fireEvent, o userEvent simula eventos de uma maneira mais semelhante às ações reais de um usuário, oferecendo uma camada adicional de realismo aos testes.

Uso básico

O userEvent simplifica a simulação de eventos, tornando o código de teste mais expressivo e próximo do comportamento humano. Por exemplo, ao 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 });
  userEvent.click(button);
 
  expect(fn).toHaveBeenCalledTimes(1);
});

Vantagens do userEvent

  1. Mais realista: O userEvent simula eventos de uma maneira mais próxima das interações reais do usuário, proporcionando uma experiência de teste mais realista.

  2. Abstração simplificada: As funções fornecidas pelo userEvent são intuitivas e abstraem detalhes, simplificando a simulação de eventos como clique, digitação, foco, entre outros.

  3. Cobertura maior: O userEvent abrange uma ampla variedade de interações do usuário, oferecendo funções específicas para situações comuns, como preenchimento de formulários e navegação por teclado.

Referências