javascript - 使用 fireEvent 传递自定义事件属性(测试库和 Jest )

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、使用自定义事件、手动添加事件监听器等对此进行各种变体，但我似乎无法访问任何事件属性通过任何这些变体。

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

Answer 1

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

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

发送一个 MouseEvent其 button 属性设置为 2。

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

The more your tests resemble the way your software is used, the more confidence they can give you.

但是，通过将自定义属性传递给 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)
})