Unit testing 如何正确（单元）测试Om/React组件？

我已经开发了Om/React组件，但是我觉得不能用单元测试驱动我的开发非常不舒服。我已经尝试设置clojurescript项目，在这些组件上运行单元测试，到目前为止，我已经能够编写单元测试并实例化组件。我缺少的是确保我的组件正确响应某些事件的能力，例如，

onChange

，这样我就可以模拟用户输入

以下是我的测试代码：

(defn simulate-click-event
  "From https://github.com/levand/domina/blob/master/test/cljs/domina/test.cljs"
  [el]
  (let [document (.-document js/window)]
    (cond
     (.-click el) (.click el)
     (.-createEvent document) (let [e (.createEvent document "MouseEvents")]
                                (.initMouseEvent e "click" true true
                                                 js/window 0 0 0 0 0
                                                 false false false false 0 nil)
                                (.dispatchEvent el e))
     :default (throw "Unable to simulate click event"))))

(defn simulate-change-event
  "From https://github.com/levand/domina/blob/master/test/cljs/domina/test.cljs"
  [el]
  (let [document (.-document js/window)]
    (cond
     (.-onChange el) (do (print "firing on change on "  el) (.onChange el))
     (.-createEvent document) (let [e (.createEvent document "HTMLEvents")]
                                (print "firing  " e " on change on "  (.-id el))
                                (.initEvent e "change" true true)
                                (.dispatchEvent el e))
     :default (throw "Unable to simulate change event"))))

(def sink
  "contains a channel that receives messages along with notification type"
  (chan))

;; see http://yobriefca.se/blog/2014/06/04/publish-and-subscribe-with-core-dot-asyncs-pub-and-sub/
(def source
  (pub sink #(:topic %)))

(defn change-field!
  [id value]
  (let [el (sel1 (keyword (str "#" id)))]
     (dommy/set-value! el  value)
     (simulate-change-event el)
     ))

(deftest ^:async password-confirmation
  (testing "do not submit if passwords are not equal"
    (let [subscription (chan)]
      (sub source :user-registration subscription)
      (om/root
       (partial u/registration-view source sink)
       nil
       {:target (sel1 :#view)})

      (go
       (let [m (<! subscription)]
         (is (= :error (:state m)))
         (done)
         ))

      (change-field! "userRequestedEmail"    "foo@bar.com")
      (change-field! "userRequestedPassword" "secret")
      (change-field! "confirmPassword"       "nosecret")

      (simulate-click-event (sel1 :#submitRegistration))
      )))

---

通过在测试中添加跟踪，我可以看到，当我触发

change

事件时，组件的状态没有更新，尽管它被正确触发。我怀疑这与Om/React的工作方式有关，包装DOM组件，但不确定如何处理这一问题。

您可以使用React库中的ReactTestUtils模拟组件中的事件。 我正在用摩卡咖啡做类似的事情来测试变化事件：

var comp = ReactTestUtils.renderIntoDocument(<Component />);
var changingElement = ReactTestUtils.findRenderedDOMComponentWithClass(comp, 'el-class'); 
it ('calls myChangeMethod on change', function() {
  ReactTestUtils.Simulate.change(changingElement);
  assert(comp.myChangeEventMethod.called, true); 
}

var comp=reactestutils.renderIntoDocument（）；
var changingElement=ReactTestUtils.findRenderedDOMComponentWithClass（comp，'el class'）；
它（'在更改时调用myChangeMethod'，函数（）{
reactestutils.Simulate.change（changingElement）；
断言（comp.mychangeventmethod.called，true）；
}

只是为了确保：您的测试组件是否由om呈现（甚至只是“内存中”）您能否确认DOM元素已实际创建，并且已附加onChange处理程序？是的。单击时触发

事件，我可以通过core.async通道看到消息：这就是

submit registration

所做的，将XRIO调用的结果发送到

源

通道，然后接收该通道通过

（go…）

在测试中循环。@insitu可能会有帮助。我使用mochify测试react组件，并在mochify的wiki页面中添加了一个示例：@TJ。感谢您的指针。我也用react自己的测试工具以同样的方式思考。但这可能需要一些工作才能正确集成到clojurescript和Om中。我将看到如果我能回去的话。。。

var comp = ReactTestUtils.renderIntoDocument(<Component />);
var changingElement = ReactTestUtils.findRenderedDOMComponentWithClass(comp, 'el-class'); 
it ('calls myChangeMethod on change', function() {
  ReactTestUtils.Simulate.change(changingElement);
  assert(comp.myChangeEventMethod.called, true); 
}