Disparando Eventos

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Nota

La mayoría de proyectos tienen algunos casos de uso para fireEvent, pero generalmente deberías utilizar @testing-library/user-event.

fireEvent

fireEvent(node: HTMLElement, event: Event)

Dispara eventos del 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 del DOM. Consulta src/event-map.js para ver la lista completa junto con las eventProperties predeterminadas.

target: Cuando un evento se despacha en un elemento, el evento contiene el elemento objetivo en una propiedad llamada target. Por conveniencia, si proporcionas una propiedad target en eventProperties (segundo argumento), esas propiedades se asignarán al nodo que recibe el evento.

Esto es particularmente útil para eventos de cambio:

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: Los eventos de arrastre tienen una propiedad dataTransfer que contiene datos transferidos durante la operación. Por conveniencia, si proporcionas una propiedad dataTransfer en eventProperties (segundo argumento), esas propiedades se añadirán al evento.

Esto debe usarse principalmente para probar interacciones de arrastrar y soltar.

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

Eventos de teclado: Existen tres tipos de eventos relacionados con entrada de teclado: keyPress, keyDown y keyUp. Al dispararlos, debes referenciar un elemento en el DOM y la tecla que deseas activar.

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

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

Puedes encontrar qué código de tecla usar en https://www.toptal.com/developers/keycode.

createEvent[eventName]

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

Métodos convenientes para crear eventos del DOM que luego pueden ser disparados por fireEvent, permitiéndote tener una referencia al evento creado. Esto puede ser útil si necesitas acceder a propiedades de evento que no pueden iniciarse programáticamente (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

También puedes crear eventos genéricos:

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

Usando mocks de funciones de Jest

Las funciones mock de Jest pueden usarse para verificar que un componente llama a su callback asociado en respuesta a un 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)
})