Disparando Eventos

[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 →

Nota

A maioria dos projetos tem alguns casos de uso para fireEvent, mas na maior parte do tempo você provavelmente deve usar @testing-library/user-event.

fireEvent

fireEvent(node: HTMLElement, event: Event)

Dispara eventos DOM.

// <button>Submit</button>
fireEvent(
  getByText(container, 'Submit'),
  new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
  }),
)

fireEvent[eventName]

fireEvent[eventName](node: HTMLElement, eventProperties: Object)

Métodos convenientes para disparar eventos DOM. Consulte src/event-map.js para ver a lista completa e as eventProperties padrão.

target: Quando um evento é despachado em um elemento, o evento possui o elemento alocado em uma propriedade chamada target. Por conveniência, se você definir uma propriedade target nas eventProperties (segundo argumento), essas propriedades serão atribuídas ao nó que está recebendo o evento.

Isso é particularmente útil para eventos de alteração:

fireEvent.change(getByLabelText(/username/i), {target: {value: 'a'}})

// note: attempting to manually set the files property of an HTMLInputElement
// results in an error as the files property is read-only.
// this feature works around that by using Object.defineProperty.
fireEvent.change(getByLabelText(/picture/i), {
  target: {
    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
  },
})

// Note: The 'value' attribute must use ISO 8601 format when firing a
// change event on an input of type "date". Otherwise the element will not
// reflect the changed value.

// Invalid:
fireEvent.change(input, {target: {value: '24/05/2020'}})

// Valid:
fireEvent.change(input, {target: {value: '2020-05-24'}})

dataTransfer: Eventos de arrastar possuem uma propriedade dataTransfer que contém dados transferidos durante a operação. Por conveniência, se você definir uma propriedade dataTransfer nas eventProperties (segundo argumento), essas propriedades serão adicionadas ao evento.

Isso deve ser usado principalmente para testar interações de drag and drop.

fireEvent.drop(getByLabelText(/drop files here/i), {
  dataTransfer: {
    files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
  },
})

Eventos de teclado: Existem três tipos de eventos relacionados à entrada do teclado - keyPress, keyDown e keyUp. Ao dispará-los, você precisa referenciar um elemento no DOM e a tecla que deseja acionar.

fireEvent.keyDown(domNode, {key: 'Enter', code: 'Enter', charCode: 13})

fireEvent.keyDown(domNode, {key: 'A', code: 'KeyA'})

Você pode descobrir qual código de tecla usar em https://www.toptal.com/developers/keycode.

createEvent[eventName]

createEvent[eventName](node: HTMLElement, eventProperties: Object)

Métodos convenientes para criar eventos DOM que podem ser disparados posteriormente com fireEvent, permitindo que você tenha uma referência ao evento criado: isso pode ser útil se você precisar acessar propriedades de evento que não podem ser iniciadas programaticamente (como timeStamp).

const myEvent = createEvent.click(node, {button: 2})
fireEvent(node, myEvent)
// myEvent.timeStamp can be accessed just like any other properties from myEvent
// note: The access to the events created by `createEvent` is based on the native event API,
// Therefore, native properties of HTMLEvent object (e.g. `timeStamp`, `cancelable`, `type`) should be set using Object.defineProperty
// For more info see: https://developer.mozilla.org/en-US/docs/Web/API/Event

Você também pode criar eventos genéricos:

// simulate the 'input' event on a file input
fireEvent(
  input,
  createEvent('input', input, {
    target: {files: inputFiles},
    ...init,
  }),
)

Usando Mocks de Função do Jest

Funções Mock do Jest podem ser usadas para testar se um componente chamará seu callback associado em resposta a um evento específico.

React

import {render, screen, fireEvent} from '@testing-library/react'

const Button = ({onClick, children}) => (
  <button onClick={onClick}>{children}</button>
)

test('calls onClick prop when clicked', () => {
  const handleClick = jest.fn()
  render(<Button onClick={handleClick}>Click Me</Button>)
  fireEvent.click(screen.getByText(/click me/i))
  expect(handleClick).toHaveBeenCalledTimes(1)
})

Angular

import {render, screen, fireEvent} from '@testing-library/angular'

@Component({
  template: `<button (click)="handleClick.emit()">Click Me</button>`,
})
class ButtonComponent {
  @Output() handleClick = new EventEmitter<void>()
}

test('calls onClick prop when clicked', async () => {
  const handleClick = jest.fn()
  await render(ButtonComponent, {
    componentOutputs: {
      handleClick: {emit: handleClick} as any,
    },
  })
  await fireEvent.click(screen.getByText(/click me/i))
  expect(handleClick).toHaveBeenCalledTimes(1)
})