如何解决通过fireEvent传递自定义事件属性testing-library和jest 我想做什么最小的可复制示例我尝试过的方法/想法
我想做什么
我想在某些测试(使用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中发生的事情。当然,看起来应该添加这些附加属性。
解决方法
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)
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。