ReactTestUtils.Simulate.mouseDown

Question

I'm trying to use the React Simulate function to simulate a mouseDown event for testing.

(defn mouse-down [node]
   ((.-mouseDown(.-Simulate ReactTestUtils) node (clj->js {:button 0})))

js translation:

ReactTestUtils.Simulate.mouseDown(node, {button: 0})

Nothing I've tried has resulted in an invocation of the mousedown listener--but when the listener is there when i try it in the browser where it works. It's just in the simulation.

What am I missing?

Answer 1

There are a couple mistakes in the Syntax here and your parens don't match. Generally it becomes easier if you reorganize the code a bit and -> can help there. As mentioned in the comment you want to use .mouseDown instead of .-mouseDown. I opted to use #js instead of clj->js since that is more optimal for static js objects such as this.

(defn mouse-down [node]
  (-> (.-Simulate ReactTestUtils)
      (.mouseDown node #js {:button 0})))

You can also make this a little more readable depending on where ReactTestUtils is coming from. I'm assuming its from the react-dom package which you just required.

;; in your ns
(:require ["react-dom/test-utils" :as ReactTestUtils])

;; which would allow
(defn mouse-down [node]
  (ReactTestUtils/Simulate.mouseDown node #js {:button 0}))

;; or if you are on the latest CLJS version
(:require ["react-dom/test-utils$Simulate" :as sim])

;; and then
(defn mouse-down [node]
  (sim/mouseDown node #js {:button 0}))