React-testing-library and Re-frame clojurescript app

react-testing-library-clojurescript.cljs

(ns demo.core-test
  (:require [cljs.test :refer [deftest
                               testing
                               is
                               use-fixtures]]
            [clojure.string :refer [lower-case]]
            [demo.components :refer [title-component
                                     counter-component]]
            [reagent.core :as r]
            ["react-testing-library" :as rtl]))

(use-fixtures :each
              {:after rtl/cleanup})

;; Idea from https://github.com/reagent-project/reagent/blob/master/test/reagenttest/utils.cljs
(defn with-mounted-component [comp f]
  (let [mounted-component (rtl/render (r/as-element comp))]
    (try
      (f mounted-component)
      (finally
        (.unmount mounted-component)
        (r/flush)))))

(defn click-element [el]
  (.click rtl/fireEvent el)
  (r/flush))

(deftest test-title
  (testing "A provided title should be enclosed in a h1"
           (with-mounted-component
            [title-component "hello"]
            (fn [component]
              (is
               (= "h1"
                  (-> component
                      (.getByText "hello")
                      (.-tagName)
                      lower-case))))))

  (testing "A title saying 'hello' is shown to the user"
           (with-mounted-component
            [title-component "hello"]
            (fn [component]
              (is
               (= "hello"
                  (-> component
                      (.getByText "hello")
                      (.-innerHTML))))))))

(deftest test-stateful-component
  (testing "A counter should track clicks"
           (with-mounted-component
            [counter-component {:text "increase"}]
            (fn [component]
              (is
               (= "Counter: 0"
                  (->> (.getByText component #"Counter:")
                       (.-innerHTML))))
              (click-element (.getByText component "increase"))
              (is
               (= "Counter: 1"
                  (->> (.getByText component #"Counter:")
                       (.-innerHTML))))))))