使用ReactTestUtils.Simulate.mouseDown模拟事件未触发监听器如何解决？

1 优先修正ClojureScript代码语法错误 #

你当前的代码存在括号嵌套错误，属性访问、参数传递的位置不符合ClojureScript调用JS接口的语法规范，且多了一层多余的执行括号。正确的写法有两种：

;; 写法1：使用ClojureScript内置点语法调用对象方法，更简洁不易出错
(defn mouse-down [node]
  (.mouseDown (.-Simulate ReactTestUtils) node #js {:button 0}))

;; 写法2：显式获取方法后调用
(defn mouse-down [node]
  (let [simulate-obj (.-Simulate ReactTestUtils)
        mouse-down-fn (.-mouseDown simulate-obj)]
    (mouse-down-fn node #js {:button 0})))

注意：优先用#js直接构造JS对象代替clj->js，性能更好且可以避免不必要的转换异常。

2 确认入参的节点类型 #

Simulate.mouseDown要求传入真实DOM节点作为参数，如果你传入的是React组件实例，需要先做转换：

(require '[react-dom :as react-dom])
;; comp-inst 为你拿到的React类组件实例
(.mouseDown (.-Simulate ReactTestUtils) (react-dom/findDOMNode comp-inst) #js {:button 0})

3 确认监听器的绑定方式 #

React TestUtils的Simulate仅能触发React合成事件体系绑定的监听函数：

• 如果你是通过React的onMouseDown属性绑定的监听器，修正语法后即可正常触发
• 如果你是直接通过原生addEventListener绑定的mousedown监听，Simulate无法触发，需要手动派发原生事件：

(defn native-mouse-down [node]
  (.dispatchEvent node (js/MouseEvent. "mousedown" #js {:button 0 :bubbles true})))

4 版本适配注意事项 #

如果你的项目使用React 18及以上版本，官方已废弃ReactTestUtils.Simulate，切换到@testing-library/user-event的对应方法模拟用户操作兼容性更好。

内容的提问来源于stack exchange，提问作者maniginam