觸發事件

注意

大多數專案都有一些使用 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 事件的便捷方法。請查看 src/event-map.js 以獲取完整列表以及預設的 eventProperties。

target：當事件在元素上觸發時，事件在名為 target 的屬性上具有該目標元素。為了方便起見，如果您在 eventProperties（第二個參數）中提供 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（第二個參數）中提供 dataTransfer 屬性，則這些屬性將被新增至事件。

這主要用於測試拖放互動。

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

鍵盤事件：有三種與鍵盤輸入相關的事件類型 - keyPress、keyDown 和 keyUp。觸發這些事件時，您需要參照 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)

用於建立 DOM 事件的便捷方法，這些事件可以由 fireEvent 觸發，讓您可以參照已建立的事件：如果您需要存取無法以程式方式初始化的事件屬性（例如 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 的模擬函數可用於測試元件是否會呼叫其繫結回呼以回應特定事件。

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