1

React を約 1 年間使用しましたが、不変のデータが非常に印象的でした。Clojurescript/Reagent に移行したいと考えていますが、コードをテストするための優れた方法が必要です。コンポーネントについては、次のようにしました。

  1. 送信した小道具に応じて、コンポーネントの出力をテストします。
  2. クリックなどのイベントが発生したときに、コンポーネントが正しい関数を正しいパラメーターで呼び出すことをテストします。

1 の場合は次のようになります。

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();
     });

2 の場合は次のようになります。

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"}]}]]
                );
     });

テストには facebook Jest を使用しました。

Clojurescript で Reagent を使用して同じことを行うにはどうすればよいですか?

4

1 に答える 1

2

試薬成分の検査:

コンポーネントの出力をテストします。コンポーネントの場合:

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

テスト:

 (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"))))

クリックなどのイベントが発生したときに、コンポーネントが正しい関数を正しいパラメーターで呼び出すことをテストします。

(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)))))

dom を操作してイベントをシミュレートするには:

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

于 2015-12-22T17:12:12.373 に答える