question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FireEvent should provide generated event object

See original GitHub issue

Describe 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:open
  • Created 2 years ago
  • Reactions:4
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
CodingItWrongcommented, Sep 27, 2022

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.

2reactions
mdjastrzebskicommented, Aug 9, 2022

It seems that RTL fireEvent implementation passes some default Event object in case user omitted the event.

We should match that if feasible.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found