A way of testing views in ClojureScript Apps

Photo by Samuel Zeller on Unsplash

Recently, I have been embracing Clojure and ClojureScript since it’s fascinating a lot to me, so I consider myself at the beginning of a really long path.

I have tried to assemble a Front End stack that is appealing to me and I struggled to find examples on testing component rendering through UI (I find it a really good practice — and strongly suggest it), and given the fact I am a TDD/BDD fan, I decided to give it a try on my own.

These examples are based on Re-frame and Reagent (orchestrated by Shadow-cljs — really nice concept — ), focusing mostly on simple component rendering (stateless and stateful ones).

Since Re-frame and Reagent are based on React, I decided to use React-testing-library which helps (or force) to transition from test cases addressing UI structure to (almost pure) End-user approach (or BDD I’d say).

NPM devDependencies in the package.json look like the following:

"devDependencies": {
  "karma": "^4.1.0",
  "karma-chrome-launcher": "^2.2.0",
  "karma-cljs-test": "^0.1.0",
  "shadow-cljs": "^2.8.31",
  "react-testing-library": "^6.1.2"
},

And below you can find the components we will use for the example:

(ns demo.components
  (:require [reagent.core :as r]))

(defn title-component [text] ;; Stateless component
  [:div
   [:h1 text]])

(defn counter-component [props] ;; Stateful component
  (let [counter (r/atom 0)]
    (fn [props]
      [:div
       [:button {:on-click #(swap! counter inc)} (:text props)]
       [:p (str "Counter: " @counter)]])))

As you noticed, we have a simple component which returns a simple heading (rendering a passed in text) into a wrapped in a div, while on the bottom part, a stateful component which updates itself on user clicks (a simple counter component which increases a count on user clicks).

These are basically the majority of components we write so how do you we test them?

Let’s start importing the things we require in our test:

(ns demo.core-test
  (:require [cljs.test :refer [deftest
                               testing
                               is
                               use-fixtures]]
            [clojure.string :refer…