FireEvent should provide generated event object
See original GitHub issueDescribe the Feature
If I understand the behavior correctly, fireEven looks for properties like “onPress” / “onScroll” in the DOM and calls these functions, but does not create an event object. This is a strong difference from the actual behavior of the application.
I understand the potential difficulties in creating these objects in nodejs environment, but it is possible for example to create objects at least partially similar to real events. It’s also possible to document which event properties are relevant and which are not.
Even the very fact that a callback will receive an object, will be closer to real situations.
Possible Implementations
- Generate an event object and pass it to the fired event.
- Fill the object with data from this event. All fields should be presented as in real event.
- Fields for which no valid values can be created must be populated with fake values and documented
Problem example
// short example component
interface Props {
/* Button's value to return */
value?: any;
/* Press callback with passed event and value */
onPress?: (value: any, event: GestureResponderEvent) => void;
}
const Button: FunctionComponent<Props> = ({ value, onPress }) => {
const onButtonPress = useCallback(
(event: GestureResponderEvent): void => {
onPress?.(value, event);
},
[onPress, value],
);
return <TouchableWithoutFeedback onPress={onButtonPress} />
};
// short tests example
fireEvent(button, 'press');
expect(typeof onPress.mock.calls[0][1]).toBe(typeof 'object');
- The last test will fail because the event is undefined
Issue Analytics
- State:
- Created 2 years ago
- Reactions:4
- Comments:9 (7 by maintainers)
Top Results From Across the Web
Firing Events - Testing Library
Convenience methods for creating DOM events that can then be fired by fireEvent , allowing you to have a reference to the event...
Read more >pass custom event properties with fireEvent (testing-library ...
The fireEvent function allows initializing intrinsic properties of Event objects, but it doesn't add arbitrary properties.
Read more >Creating and triggering events - MDN Web Docs - Mozilla
This article demonstrates how to create and dispatch DOM events. Such events are commonly called synthetic events, as opposed to the events ......
Read more >fireEvent method JavaScript - Dottoro Web Reference
Initializes an event object and dispatches it to the current element. To create an event object, use the createEventObject method in ...
Read more >Common mistakes with React Testing Library - Kent C. Dodds
@testing-library/user-event is a package that's built on top of fireEvent , but it provides several methods that resemble the user interactions ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I am hoping to be able to implement this feature. I have a hackathon on Oct 13 where I’m hoping to make significant progress on this. It’s possible my time will be pulled away with some workshops, though, so if someone else would like to work on this feature, don’t let me stop you 👍 I will post updates here.
It seems that RTL
fireEvent
implementation passes some defaultEvent
object in case user omitted the event.We should match that if feasible.