Déclencher des événements

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Note

La plupart des projets utilisent fireEvent dans quelques cas spécifiques, mais vous devriez généralement préférer @testing-library/user-event.

fireEvent

fireEvent(node: HTMLElement, event: Event)

Déclenche des événements DOM.

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

fireEvent[eventName]

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

Méthodes pratiques pour déclencher des événements DOM. Consultez src/event-map.js pour obtenir la liste complète ainsi que les eventProperties par défaut.

target : Lorsqu'un événement est dispatché sur un élément, celui-ci possède une propriété target pointant vers l'élément concerné. Par commodité, si vous fournissez une propriété target dans les eventProperties (deuxième argument), ces propriétés seront assignées au nœud recevant l'événement.

C'est particulièrement utile pour un événement de changement :

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 : Les événements de glisser-déposer possèdent une propriété dataTransfer contenant les données transférées. Par commodité, si vous fournissez une propriété dataTransfer dans les eventProperties (deuxième argument), ces propriétés seront ajoutées à l'événement.

Cette fonctionnalité doit principalement servir à tester les interactions de glisser-déposer.

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

Événements clavier : Il existe trois types d'événements liés au clavier - keyPress, keyDown, et keyUp. Pour les déclencher, vous devez référencer un élément du DOM et spécifier la touche à simuler.

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

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

Vous pouvez déterminer le code clé à utiliser sur https://www.toptal.com/developers/keycode.

createEvent[eventName]

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

Méthodes pratiques pour créer des événements DOM qui peuvent ensuite être déclenchés via fireEvent, vous permettant de conserver une référence à l'événement créé : utile pour accéder à des propriétés d'événement qui ne peuvent pas être initialisées par programme (comme 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

Vous pouvez également créer des événements génériques :

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

Utilisation des fonctions fictives de Jest

Les fonctions fictives de Jest permettent de vérifier qu'un composant appelle sa fonction de rappel en réponse à un événement spécifique.

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)
})