Fulcro + Testing Library + Karma Example

fulcro_testing_library_test.cljs

(ns test
  (:require ["@testing-library/dom" :refer [fireEvent getByRole getByText waitFor]]
            [cljs.test :refer [deftest async testing use-fixtures]]
            [com.fulcrologic.fulcro.application :as app]
            [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
            [com.fulcrologic.fulcro.dom :as dom]
            [com.fulcrologic.fulcro.mutations :as m]))

(use-fixtures :each
  {:before (fn []
             (let [el (.createElement js/document "div")]
               (.setAttribute el "id" "app")
               (.appendChild (.-body js/document) el)))
   :after  (fn []
             (.removeChild (.-body js/document) (.getElementById js/document "app")))})

(defn render-component
  [component]
  (let [app (app/fulcro-app {:remotes {:remote (http/fulcro-http-remote {:url "/api"})}})
        child (comp/factory component)
        root (comp/configure-hooks-component! (fn [_this props]
                                                (child (:root props)))
                                              {:componentName ::Root
                                               :initial-state (fn [] {:root (comp/get-initial-state component)})
                                               :query (fn [] [{:root (comp/get-query component)}])})]
    (app/mount! app root "app")
    (routing/start! app "/")
    [(.-body js/document) app]))

(defn fire-event
  [el event]
  (case event
    :click (.click fireEvent el)))

(defn get-by-text
  [el text]
  (getByText el text))

(defn get-by-role
  [el text]
  (getByRole el text))

(m/defmutation increment [_]
  (action [{:keys [state]}]
          (swap! state update-in [:component/id :counter] inc)))

(defsc Counter [this {:keys [counter]}]
  {:query [:counter]
   :ident [:component/id :counter]}
  (dom/div {}
           (dom/div {} (str "counter: " counter))
           (dom/button {:onClick #(comp/transact! this [(increment {})])} "+")))

(deftest fulcro-counter
  (testing "render"
    (let [[screen] (render-component Counter {:initial-state {:counter 0}})]
      (get-by-text screen "counter: 0"))
    (testing "when button clicked counter must increment"
      (let [[screen] (render-component Counter {:initial-state {:counter 0}})]
        (fire-event (get-by-role screen "button") :click)
        (async done (waitFor #(get-by-text screen "counter: 1") (done)))))))