A way of testing views in ClojureScript Apps

Francesco Vitullo
4 min readApr 20, 2019
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…
Francesco Vitullo

Senior Front End Engineer @IBM — thoughts are my own / I’m a passionate developer and kitesurfer