触发事件

注意
大多数项目都有几个使用 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://mdn.org.cn/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
Angular

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

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

fireEvent​

fireEvent[eventName]​

createEvent[eventName]​

使用 Jest 函数模拟​

`fireEvent`

`fireEvent[eventName]`

`createEvent[eventName]`

使用 Jest 函数模拟