ReactJSコンポーネント内のテストメソッド？

私はTDDを初めて使用し、私のjsをユニットテストし、mocha/reactシャローレンダラーを使ってReactコンポーネントをテストしています。）ReactJSコンポーネント内のテストメソッド？

var React = require('react'); 

var test = React.createClass({ 

    render: function() { 

     return (
      <div>My custom test component ({this.props.testAttribute})</div> 
     ); 
    }, 

    testFunction: function() { 
     return true; 
    } 

}); 

module.exports = test;

だから浅いレンダリングとコンポーネントは、私が（私は今行うことができます）、それがする必要がある道をレンダリングしていることを確認することに加えて、私はまたtestFunctionを（テストしたい：私のテストコンポーネントは次のようになります、それが同様に動作していることを確認してください。それをどうやってやりますか？

出典

2016-03-22 gerald

私はこれがあなたのtestFunctionの機能の種類に依存すると思います。

レンダリングと密接に関連している場合、たとえば、それはonClickHandlerなので、レンダリングと組み合わせてこれをテストします。ここでは浅いレンダリングでは十分ではないかもしれませんが、実際のDOM（jsDOMおよび/または酵素検査ライブラリをチェックアウトする必要があります）が必要な場合があります。機能がしっかりレンダリングに結合されていないいくつかの計算を行う場合

、その後、あなたは、独自のファイルに抽出し検討するかもしれない（ここでは、モジュール性と関心事の分離のような側面を考えます）。こうすることで、他のJavaScriptコードと同様に個別にテストすることができます。

コンポーネントを実際に個別にテストする場合は、実際のDOMが必要です。モカ/テストは次のようになります。

import jsdom from "jsdom"; 
import TestUtils from "react/lib/ReactTestUtils"; 

describe("Component Test", function() { 

    beforeEach(function() { 
     global.document = jsdom.jsdom("<!doctype html><html><body></body></html>"); 
     global.window = global.document.defaultView; 

     this.component = TestUtils.renderIntoDocument(<MyComponent/>); 
    }); 

    afterEach(function() { 
     delete global.document; 
     delete global.window; 
    }); 


    it("test the function", function() { 
     expect(this.component.testFunction()).to.be(true); 
    }); 
});

出典

2016-03-22 21:02:47 Nicole

ありがとうございます。私は実際に、同じアイデアを検討していました。つまり、testFunctionを別のモジュールにプッシュして、それを必要とするだけでした。これにより、テストは非常に簡単になります。今ではサンプルコードのようなコードを簡単にテストできるライブラリをテストするための適切な組み合わせを見つけることを試みています。 – gerald

説明のためにgeraldに感謝します。私はこれに少し深く掘り下げ、あなたが望むものを達成するための方法の例を加えました。 – Nicole

それは魅力的に機能しました！これは完璧です、本当に助けてくれてありがとう！ – gerald

ReactJSコンポーネント内のテストメソッド？

答えて

関連する問題