Javascript 通过fireEvent传递自定义事件属性(测试库和jest) 我想做什么

Javascript 通过fireEvent传递自定义事件属性(测试库和jest) 我想做什么,javascript,events,jestjs,react-testing-library,jsdom,Javascript,Events,Jestjs,React Testing Library,Jsdom,我希望在某些测试期间(使用react测试库和jest)将一些自定义属性传递给事件。我正在使用firevent功能。我从中了解到,第二个参数中的属性已添加到事件中。这是我目前不能做的 最小可重复示例 从“React”导入React 从'@testing library/react'导入{render,firevent} 测试('检查事件',()=>{ 常量DOM=render( { console.log(event.foo) }} > 点击我 ) //在这里,我希望foo是传递的事件的属性 //

我希望在某些测试期间(使用
react测试库
jest
)将一些自定义属性传递给事件。我正在使用
firevent
功能。我从中了解到,第二个参数中的属性已添加到事件中。这是我目前不能做的

最小可重复示例
从“React”导入React
从'@testing library/react'导入{render,firevent}
测试('检查事件',()=>{
常量DOM=render(
{
console.log(event.foo)
}}
>
点击我
)
//在这里,我希望foo是传递的事件的属性
//事件处理程序。但这不会发生。
firevent.click(DOM.getByText('click Me'),{foo:'bar'})
})
结果是记录
未定义的

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


我在封面下看了一下
firevent
中发生的事情。看起来确实应该添加这些附加属性。

函数允许初始化
事件
对象的固有属性,但它不添加任意属性。例如,打电话

firevent.click(DOM.getByText('click Me'),{button:2})
分派其
按钮
属性设置为2的

请注意,您可能希望重新了解如何在测试运行中将自定义属性传递给事件的组件,这与DOM测试库的指导原则背道而驰:

你的测试越像你的软件的使用方式,他们就越能给你信心

但是,通过将自定义属性传递给的
详细信息
属性,您的工作流在技术上是可行的。这种方法可能是可行的,这取决于您的目标,也许还可以与onClick处理程序结合使用。例如,此日志记录了

import React,{useffect,useRef}来自“React”
从'@testing library/react'导入{firevent,render}
测试('自定义事件',()=>{
常量MyComponent=({customEventHandler,children})=>{
const ref=useRef(空)
useffect(()=>{
ref.current.addEventListener('my-event',customEventHandler)
return()=>{
ref.current.removeEventListener('my-event',customEventHandler)
}
},[customEventHandler])
返回{children}
}
const customEventHandler=(事件)=>{
console.log(event.detail.foo)
}
常量{getByText}=render(
点击我
)
常量elem=getByText('单击我')
const event=createEvent(
“我的事件”,
埃伦,
{
详情:{
福:“酒吧”,
},
},
{EventType:'CustomEvent'}
)
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' })
})