I would like to pass some custom properties to an event during some tests (using react-testing-library
and jest
). I am using the fireEvent
function. I understand from thedocs that the properties in the second argument are added to the event. This is what I can't do at the moment.
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' })
})
The result is that undefined
is logged.
I have tried various variations of this using different event types, using createEvent
, using custom events, manually adding an event listener etc. and I can't seem to access any of the event properties I pass in with any of these variations.
I've looked under the cover a bit at what's going on in fireEvent
here . It certainly looks like those additional properties should be added.
The fireEvent
function allows initializing intrinsic properties of Event
objects, but it doesn't add arbitrary properties. For example, calling
fireEvent.click(DOM.getByText('Click Me'), { button: 2 })
dispatches a MouseEvent with its button
property set to 2.
Note that you may want to revisit how you're testing your component—passing custom properties to an event in a test runs counter to the guiding principle of the DOM Testing Library:
The more your tests resemble the way your software is used, the more confidence they can give you.
However, your workflow is technically possible by passing custom properties to the detail
property of a CustomEvent . This approach could be feasible depending on your goals, and perhaps in conjunction with an onClick handler. For example, this logs 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)
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.