ユニットテスト（Jest with React）コンポーネント

Question

ReactとJestの新機能です。次のコードの単体テストを書くのは非常に難しいです。
私の反応コードはうまくいっていますが、テストの一部分を理解することができませんでした。私はいくつかの同様の記事を調べようとしましたが、それでも正しいことを得ることができませんでした。 テストフォルダ（MySignUpFormTest.js）である

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var profileFor; 
var Gender; 
var MySignUpForm = React.createClass ({ 

onRequiredGender: function (e) { 
     Gender= e.currentTarget.value 
    }, 

render : function() {   

    return (

      <div className="col-sm-6 col-xs-6 r_pad_0"> 
      <input className="myRadio" type="radio" name="gender" value="Male" onChange={this.onRequiredGender}/> 
      <span className="l_pad_5">Male</span> 
      </div> 
      <div className="col-sm-6 col-xs-6 r_pad_0"> 
      <input className="myRadio" type="radio" name="gender" value="Female" onChange={this.onRequiredGender}/> 
      <span className="l_pad_5">Female</span> 
      </div>    
) 

}, 

    }); 

module.exports = MySignUpForm; 

私の冗談ファイル：

jest.unmock('../MySignUpForm'); 

//import React from 'react'; 
import ReactDOM from 'react-dom'; 
import TestUtils from 'react-addons-test-utils'; 
import MySignUpForm from '../MySignUpForm'; 

describe('MySignUpForm',() => { 
it("changes the checked state when clicked",() => { 
var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio'); 
inputs.change = jest.genMockFunction(); 

    expect(inputs[0].getDOMNode().checked).toBe(false); 
    TestUtils.Simulate.change(inputs[1], {target: {value: 'Female'}}); 
expect(inputs[0].getDOMNode().checked).toBe(false); 
expect(inputs[1].getDOMNode().checked).toBe(true); 

expect(inputs.change).toBeCalled(); //Fails 
expect(inputs.change.mock.calls.length).toBe(1); //Fails too 
}); 

}); 

私がテストしたい。ここ

は、私は、コンポーネント（MySignUpForm.js）と反応でありますラジオボタンの値の変更。

ありがとうございます。

Answer 1

入力が存在しない場合は空の配列を返し、モジュールは引数として使用しますが、反応要素が必要です。

var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio'); 

どのように作成しましたか？

inputs.change = jest.genMockFunction(); 

最初に - あなたはDOMにコンポーネントをレンダリング定義さまたは多分あなたはは、要素の

var inputs = TestUtils.scryRenderedDOMComponentsWithClass(MySignUpForm, 'myRadio'); 

を反応させる見つけることができたときに冗談が

const mySignUpFormComponent = TestUtils.renderIntoDocument(<MySignUpForm />); 

良いドキュメントを持って、それについての詳細を読んで、浅いレンダリングを使用

このイベントは、このエレメントにイベントをディスパッチすることができます。

冗談

と

この点ユニットテストはまた、その

var Gender; 
onRequiredGender: function (e) { 
     Gender= e.currentTarget.value 
    }, 

でのようなものは、あなたが唯一の状態の持っている必要がありますし、小道具のは

が好きでなければならない反応決してしない反応についての詳細を読む

var MySignUpForm = React.createClass ({ 
constructor: function() { 
    super(props); 
    this.state = { 
     gender: false 
    } 
} 
onRequiredGender: function (e) { 
    this.setState({ 
     gender: e.target.value 
    }) 
}, 

これは解決されていない場合、反応の詳細を読んでから、もう一度やり直してください。

あなたの提案を、この