ReactJS模擬變化值/單元測試

我嘗試模擬對InputText組件進行值更改的測試。我真的不知道如何做到這一點。我只知道我必須使用ref和onChange方法。但是當我在我的測試中加入一個ref時，我得到了一個錯誤，比如「你可能會添加一個ref，而不是在組件的render方法中創建一個組件」。ReactJS模擬變化值/單元測試

編輯=我給裁判在渲染我inputText組件的

這是使我的inputText組件的

 render: function() { 
     console.log('passerender'); 


     var attrs = this.generateAttributes(); 


     var type = this.props.area ? "textarea" : "text"; 

     return (
      <Input 
       className={this.props.menuClassName} 
       type={type} 
       {...attrs} 
       {...this.props.evts} 
       className={this.props.menuClassName} 
       onChange = {this.handleChange} 
       onBlur = {this.handleBlur} 
       value={this.state.value} 
       ref = "InputField" 
       hasFeedback 
      /> 
     ); 
    } 
});

這是我的inputText組件的測試頁：

 var React = require('react'), 
    InputText = require('../resources/assets/js/testcomponents/InputText.js').InputTextEditable, 
    TestUtils = require('react-addons-test-utils'), 
    ReactDOM = require('react-dom'); 


describe('InputText', function() { 

    var InputElement = TestUtils.renderIntoDocument(
     <InputText 
      area={false} 
      //evts={{onChange: handleChange}} 
      attributes={{ 
           label:'Test Input Isole', 
           name:'InputTextArea', 
           value: '', 
           wrapperClassName: 'col-md-4', 
           labelClassName: 'col-md-2', 
           groupClassName: 'row' 
           }} 
      //ref="InputField" 
      editable={true}/>); 

    var DomElement = ReactDOM.findDOMNode(InputElement); 
    var inputV = ReactDOM.findDOMNode(InputElement.refs.InputField); 

    var input = DomElement.getElementsByTagName('input')[0]; 
    var inputspan = DomElement.getElementsByTagName('span')[1]; 


    it('updates input value on key press', function() { 
     inputV.value = 'test'; 
     expect(input.getAttribute('value')).toEqual(''); 
     TestUtils.Simulate.change(inputV); 
     TestUtils.Simulate.keyDown(inputV, {key: "Entrer", keyCode: 13, which: 13}); 
     expect(input.getAttribute('value')).toEqual('test'); 
    });

來源

2016-05-16 kMM

您可以使用findRenderedComponentWithType或findRenderedDOMComponentWithTag

您不需要明確地呼叫findDOMNode，因爲TestUtils已經爲您做了這個。

var InputElement = TestUtils.renderIntoDocument(
    <InputText {...yourProps}/> 
); 

// Assuming there is only one <input /> DOM element in your Input 
var input = TestUtils.findRenderedComponentWithType(InputElement, Input) 

// or you can just find <input /> directly 
var input = TestUtils.findRenderedDOMComponentWithTag(InputElement, 'input'); 

TestUtils.Simulate.change(input); 
TestUtils.Simulate.keyDown(input, {key: "Entrer", keyCode: 13, which: 13});

來源

2016-05-16 09:45:06 wuct

謝謝！但是現在我在控制檯上得到了這個：Error：Syntax error，unrecognized expression：unsupported pseudo：invalid – kMM

@kMM Try try remove {... yourProps} – wuct

同樣的結果當我刪除道具... – kMM

好吧我找到了語法錯誤的問題。它在我的輸入mixin上的html5validator上。我試圖解決這個問題：

var html5Validity = true; 
     if (DOM !== undefined) { 
      try { 
       html5Validity = $(DOM).find(':invalid').length == 0; 
       console.log('passe'); 
      } catch (e) { 
       console.log('html5Validity = [catch]'); 
       html5Validity = true; 
      } 
     } 
     attrs = _.extend({'data-valid': validation.isValid && html5Validity}, attrs);

現在沒關係！謝謝！ :)

來源

2016-05-19 08:16:31 kMM

很高興知道。恕我直言，它會更好地使用高階組件，而不是使用mixin。 – wuct

謝謝您的建議，我會在下次嘗試 – kMM

ReactJS模擬變化值/單元測試

回答

相關問題