Question

我想做什么

我想在某些测试（使用stop和react-testing-library的过程中将一些自定义属性传递给事件。我正在使用jest函数。从docs我了解到第二个参数中的属性已添加到事件中。这是我目前无法执行的操作。

最小的可复制示例

fireEvent

结果是记录了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 here中发生的事情。当然，看起来应该添加这些附加属性。

Answer 1

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

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

调度一个button属性设置为2的MouseEvent。

请注意，您可能想重新审视如何测试组件-在测试运行中将自定义属性传递给事件，这与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)
})

通过fireEvent传递自定义事件属性（testing-library和jest）

我想做什么

最小的可复制示例

我尝试过的方法/想法

1 个答案: