React-testing-library and Re-frame clojurescript app
(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)))))))) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Thank you!