如何适当地（单元）测试Om/React组件？

Question

我开发了 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"    "[e-mail]")
      (change-field! "userRequestedPassword" "secret")
      (change-field! "confirmPassword"       "nosecret")

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

这个测试运行了，但失败了，因为change-field!函数实际上并没有改变组件的状态。以下是组件代码（请原谅重复...）：

(defn registration-view
  "Registration form for users.

  Submitting form triggers a request to server"
  [source sink _ owner]
  (reify

    om/IInitState
    (init-state [_]
                {:userRequestedEmail ""
                 :userRequestedPassword ""
                 :confirmPassword ""}
                )

    om/IRenderState
    (render-state
     [this state]
     (dom/fieldset
      nil
      (dom/legend nil "User Registration")
      (dom/div #js { :className "pure-control-group" }

               (dom/label #js { :for "userRequestedEmail" } "EMail")
               (dom/input #js { :id "userRequestedEmail" :type "text" :placeholder "Enter an e-mail"
                                :value (:userRequestedEmail state)
                                :onChange #(om/set-state! owner :userRequestedEmail (.. % -target -value))}))

      (dom/div #js { :className "pure-control-group" }
               (dom/label #js { :for "userRequestedPassword" } "Password")
               (dom/input #js { :id "userRequestedPassword" :type "password" :placeholder "Enter password"
                                :value (:userRequestedPassword state)
                                :onChange #(om/set-state! owner :userRequestedPassword (.. % -target -value))}))

      (dom/div #js { :className "pure-control-group" }
               (dom/label #js { :for "confirmPassword" } "")
               (dom/input #js { :id "confirmPassword" :type "password" :placeholder "Confirm password"
                                :value (:confirmPassword state)
                                :onChange #(om/set-state! owner :confirmPassword (.. % -target -value))}))


      (dom/button #js {:type "submit"
                       :id "submitRegistration"
                       :className "pure-button pure-button-primary"
                       :onClick #(submit-registration state sink)}
                  "Register")))))

通过在测试中添加追踪，我发现当我触发change事件时，组件的状态并未更新，尽管它已被正确触发。我怀疑这与Om/React的工作方式有关，它会包装DOM组件，但不确定如何处理这个问题。

- insitu

---

只是为了确认：你的测试组件是否被om渲染？即使仅“内存中”也可以吗？你能确认DOM元素实际上已经被创建，并且onChange处理程序已经被附加了吗？ - phtrivier

是的。当触发 on click 事件时，我可以看到消息通过 core.async 通道传递：这就是 submit-registration 所做的，将 xhrio 调用的结果发送到 source 通道，然后由测试内部的 (go ...) 循环接收。 - insitu

@insitu 或许采用不同的方法会有所帮助。我使用 mochify 测试 React 组件，并在 mochify 的维基页面上添加了一个示例：https://github.com/mantoni/mochify.js/wiki/Testing-a-ReactJS-Component-with-Mochify - T. Junghans

@TJ。感谢您的指引。我也在考虑使用React自己的测试工具，但是这可能需要一些工作来正确地集成到Clojurescript和Om中。我会看看能否回来继续研究它... - insitu

Answer 1

您可以使用React库中的ReactTestUtils来模拟组件中的事件。 我正在使用mocha并进行以下操作来测试更改事件：

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); 
}

- user874639