Clojurescript/Reagent Unit testing component output and behaviour

Question

We used react for about one year now, with immutable data, very impressive. We now want to move to Clojurescript/Reagent, but we need a very good way to test our code. For components this is what we did:

Test the output of the component, depending on the props we sent:
Test that the component invokes the right functions and with the right parameters when an event like click occurs

For 1 it would be like:

function renderFFC(filters, search_criterias)
{
    return TestUtils.renderIntoDocument(React.createElement(FilterIntervalNumberComponent,{filter:filters, search_criteria:search_criterias}));
}

describe("IN", function(){
    it("should render search criteria - interval", function() {
        var criterias = {};
        var ffc = renderFFC(filter, criterias);
        expect(ffc.refs[0].getDOMNode().value).toBeNull();
        expect(ffc.refs[1].getDOMNode().value).toBeNull();
     });

For 2 it would be something like:

describe("OUT", function(){
    it("should change the values, then click - boolean ", function() {
        //mock function
        set_criteria_and_search = jest.genMockFunction();

        var fbc = renderFBC(filter, {});

        React.addons.TestUtils.Simulate.change(fbc.refs.yes.getDOMNode(),{nativeEvent: {target: {value: true}}});

        expect(controller.set_criteria_and_search.mock.calls)
          .toEqual(
                    [['taxes_applied',{'taxes_applied':[{value:"1"}]}]]
                );
     });

We used facebook Jest for the tests.

How do I dothe same thing in Clojurescript with Reagent, preferably having the tests automatically run?

Looking forward to an answer. Try with the lein template **reagent** and see what they set up. Don't forget the `+test` option https://github.com/reagent-project/reagent-template/blob/master/README.md#options — Joaquin, Dec 10 '15 at 08:58
For some reason I can't seem to get +test to work. lein new figwheel name -- --reagent +test?? — Dan Bunea, Dec 11 '15 at 14:47
That's the figwheel template you are using. Use the reagent template instead: `lein new reagent +test` — Joaquin, Dec 11 '15 at 15:27
I managed to make figwheel run my tests automatically, in a second tab. I don't have any component tests yet, and I am studying differeny scenarios on how to do that. For figwheel tests I watched https://www.youtube.com/watch?v=j-kj2qwJa_E then took the inspiration on how to change the configuration from the sample app: https://github.com/bhauman/crashverse — Dan Bunea, Dec 15 '15 at 15:08
Nice! Could you post yourself an answer with the snippet of configuration from the project.clj? That would be helpful for people coming to the question in the future! — Joaquin, Dec 15 '15 at 17:16
Configure testing in a figwheel/reagent proj: 1. Addi the test build in project.cljs https://github.com/DanBunea/cljs-learning-weather-app/blob/master/project.clj See the :cljsbuild test and :aliases 2. Adding a test.html in resources/public https://github.com/DanBunea/cljs-learning-weather-app/blob/master/resources/public/test.html 3. Adding the test-runner and the core.cljs https://github.com/DanBunea/cljs-learning-weather-app/tree/master/test/weather_app 4. starting both autobuild: lein figwheel dev test 2 tabs in a browser: localhost:3449/index.html & localhost:3449/test.html — Dan Bunea, Dec 16 '15 at 08:11
Or look here: https://github.com/DanBunea/cljs-learning-weather-app/wiki/Configure-testing — Dan Bunea, Dec 16 '15 at 08:14
There is a very active slack community in clojure. You'll get a lot of answers over there. Not nearly as many here: http://clojurians.net/ — Mike Thompson, Dec 18 '15 at 17:38
Thanks Mike I am already in. I need to answer all my questions because now I found the answers :) maybe some others will find them useful — Dan Bunea, Dec 18 '15 at 22:36
I also posted a way in which we started to test components, in this question: http://stackoverflow.com/questions/34368653/clojurescript-reagent-unit-testing-component-simulate-onchange. Basically render them on screen, and check the rendered dom elements using jquery as well as simulating events. — Dan Bunea, Dec 19 '15 at 08:03

score 2 · Accepted Answer · answered Dec 22 '15 at 17:12

Testing reagent components:

Test the component output. For a component:

 (defn weather-component [city temp country]
  [:div#weather
    [:h2#city {:on-click #(do-something 101)} city ]
    [:h3#temp temp]
    [:h3#contry country]])

The test:

 (deftest weather-component-test-in
  ;;WHEN render component in test
  (let [comp (r/render-component [w/weather-component "Paris" 12]
                             (. js/document (getElementById "test")))]
    ;;ASSERT
    (is (= (d/html (sel1 :#city)) "Paris"))
    (is (= (d/html (sel1 :#temp)) "12"))))

Test that the component invokes the right functions and with the right parameters when an event like click occurs

(deftest weather-component-test-out 
 (let [comp (r/render-component [w/weather-component "London" 0]
                             (. js/document (getElementById "test"))) 
    expected-invocations (atom [])] 
    (with-redefs [weather-app.core/do-something #(swap! expected-invocations conj %)] 
      (sim/click (sel1 :#city) {})
      (is (=[101] @expected-invocations)))))

To manipulate the dom and simulate events:

[cljs-react-test "0.1.3-SNAPSHOT"] and dommy (d/...)

Clojurescript/Reagent Unit testing component output and behaviour

1 Answers1