Единичное тестирование с помощью Jest on React Components

Question

Я новый, чтобы реагировать и шутить, и мне очень сложно написать единичный тест для следующего кода.
Мой код реакции работает хорошо, но я не могу определить его часть тестирования. Я попытался заглянуть в несколько похожих сообщений, но все еще не мог понять это правильно.

Вот мой Реагировать компонент (MySignUpForm.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; 

Мой файл шуткой, который находится в тестов папка (MySignUpFormTest.js):

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

}); 

Я хочу протестировать изменение значения переключателя.

Благодарим вас заблаговременно.

Answer 1

Попробуйте найти вход, если вход не существует. Возвращаемый пустой массив, модуль как аргумент, но ему нужен элемент реакции.

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

как вы его придумали?

inputs.change = jest.genMockFunction(); 

Первый - вы определены визуализации компонент в DOM или, возможно, использовать Shallow визуализации, подробнее об этом, шуткой имеют хорошую документацию

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

когда вы можете найти реагировать элемента

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

и только после этого вы можете отправить мероприятие этому элементу

этой связи блок-тест с шуткой

также узнать больше о реакции, никогда не что-то вроде этого

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

In реагируют вы должны иметь только государства и проп-х

хотел

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

этот, если не решенный пример, читайте больше о реакции, а затем повторите попытку.

маленький намек поиск

<input onChange={ this.onRequiredGender.bind(this) }/> 

в гугле, почему вы должны сделать это