使用 fireEvent 传递自定义事件属性（测试库和笑话）

Question

我想做的事

我想在某些测试期间将一些自定义属性传递给事件（使用react-testing-library 和jest）。我正在使用fireEvent 函数。我从docs 了解到，第二个参数中的属性已添加到事件中。这是我目前做不到的。

最小的可重现示例

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
test('check event', () => {
  const DOM = render(
    <div
      onClick={event => {
        console.log(event.foo)
      }}
    >
      Click Me
    </div>
  )
  
  // here I am expecting foo to be a property on the event passed
  // to the event handler. But that doesn't happen.
  fireEvent.click(DOM.getByText('Click Me'), { foo: 'bar' })
})

结果是记录了undefined。

我尝试过的方法/想法

我已经尝试过使用不同事件类型、使用createEvent、使用自定义事件、手动添加事件侦听器等的各种变体，但我似乎无法访问我传入的任何事件属性这些变化。

我已经深入了解了fireEventhere 中发生的事情。看起来确实应该添加这些额外的属性。

Answer 1

fireEvent 函数允许初始化Event 对象的内在属性，但它不会添加任意属性。比如调用

fireEvent.click(DOM.getByText('Click Me'), { button: 2 })

调度一个MouseEvent 并将其button 属性设置为2。

请注意，您可能需要重新审视您测试组件的方式——将自定义属性传递给测试运行中的事件与 DOM 测试库的指导原则背道而驰：

您的测试与您的软件使用方式越相似，它们能给您的信心就越大。

但是，通过将自定义属性传递给 CustomEvent 的 detail 属性，您的工作流程在技术上是可行的。根据您的目标，这种方法可能是可行的，并且可能与 onClick 处理程序结合使用。比如这个记录bar:

import React, { useEffect, useRef } from 'react'
import { fireEvent, render } from '@testing-library/react'

test('custom event', () => {
  const MyComponent = ({ customEventHandler, children }) => {
    const ref = useRef(null)

    useEffect(() => {
      ref.current.addEventListener('my-event', customEventHandler)

      return () => {
        ref.current.removeEventListener('my-event', customEventHandler)
      }
    }, [customEventHandler])

    return <div ref={ref}>{children}</div>
  }

  const customEventHandler = (event) => {
    console.log(event.detail.foo)
  }

  const { getByText } = render(
    <MyComponent customEventHandler={customEventHandler}>
      Click Me
    </MyComponent>
  )

  const elem = getByText('Click Me')
  const event = createEvent(
    'my-event',
    elem,
    {
      detail: {
        foo: 'bar',
      },
    },
    { EventType: 'CustomEvent' }
  )

  fireEvent(elem, event)
})