本文へスキップ

イベントの発火

注記

ほとんどのプロジェクトではfireEventをいくつか使用しますが、ほとんどの場合、@testing-library/user-eventを使用する方が適切です。

fireEvent​

fireEvent(node: HTMLElement, event: Event)

DOMイベントを発火させます。

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

fireEvent[eventName]​

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

DOMイベントを発火させるための便利なメソッドです。完全なリストとデフォルトのeventPropertiesについては、src/event-map.jsをご覧ください。

target: 要素でイベントがディスパッチされると、イベントにはtargetというプロパティにその要素が含まれます。便宜上、eventProperties（第2引数）にtargetプロパティを提供すると、これらのプロパティはイベントを受信するノードに割り当てられます。

これは特に変更イベントで役立ちます。

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: ドラッグイベントには、操作中に転送されたデータを含むdataTransferプロパティがあります。便宜上、eventProperties（第2引数）にdataTransferプロパティを提供すると、これらのプロパティがイベントに追加されます。

これは主にドラッグアンドドロップ操作のテストに使用されるべきです。

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

キーボードイベント: キーボード入力に関連するイベントタイプには、keyPress、keyDown、keyUpの3種類があります。これらを発生させるには、DOM内の要素と発生させるキーを参照する必要があります。

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

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

使用するキーコードについては、https://www.toptal.com/developers/keycodeをご覧ください。

createEvent[eventName]​

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

fireEventによって発火できるDOMイベントを作成するための便利なメソッドで、作成されたイベントを参照できます。これは、（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

汎用イベントを作成することもできます。

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

Jest関数モックの使用​

Jestのモック関数を使用して、コンポーネントが特定のイベントに応答してバインドされたコールバックを呼び出すかどうかをテストできます。

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