Menu
I'm trying to simulate a .click() event on a React element but I can't figure out why it is not working (It's not reacting when I'm firing the event).
I would like to post a Facebook comment using only JavaScript but I'm stuck at the first step (do a .click() on div[class="UFIInputContainer"] element).
My code is:
document.querySelector('div[class="UFIInputContainer"]').click(); And here's the URL where I'm trying to do it: https://www.facebook.com/plugins/feedback.php...
P.S. I'm not experienced with React and I don't know really if this is technically possible. It's possible?
EDIT: I'm trying to do this from Chrome DevTools Console.
568
To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.
Method 1: Using the click() method: The click() method is used to simulate a mouse click on an element. It fires the click event of the element on which it is called. The event bubbles up to elements higher in the document tree and fires their click events also.
To simulate a button click in Jest and JavaScript, we call the Enzyme simulate method. import React from "react"; import { shallow } from "enzyme"; import Button from "./Button"; describe("Test Button component", () => { it("Test click event", () => { const mockCallBack = jest.
React tracks the mousedown and mouseup events for detecting mouse clicks, instead of the click event like most everything else. So instead of calling the click method directly or dispatching the click event, you have to dispatch the down and up events. For good measure I'm also sending the click event but I think that's unnecessary for React:
We will look at the most simple, built-in, and official way: using the ReactTestUtils from the react-dom library. The utilities that will allow us to simulate browser events, such as click and change, are in the ReactTestUtils.Simulate module.
What is the React onClick Event Handler? Whenever you need to perform an action after clicking a button, link, or pretty much any element, you’ll use the onClick event handler. Therefore, the onClick event handler is one of the most powerful and most used tools in your React tool belt.
Here is how we can test it: Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like React Testing Library to reduce the boilerplate code.
React tracks the mousedown and mouseup events for detecting mouse clicks, instead of the click event like most everything else. So instead of calling the click method directly or dispatching the click event, you have to dispatch the down and up events. For good measure I'm also sending the click event but I think that's unnecessary for React:
const mouseClickEvents = ['mousedown', 'click', 'mouseup']; function simulateMouseClick(element){ mouseClickEvents.forEach(mouseEventType => element.dispatchEvent( new MouseEvent(mouseEventType, { view: window, bubbles: true, cancelable: true, buttons: 1 }) ) ); } var element = document.querySelector('div[class="UFIInputContainer"]'); simulateMouseClick(element); This answer was inspired by Selenium Webdriver code.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
