[英]What is a good way of testing React component callbacks to parent components?
我目前正在采用更多的TDD方法,並希望在測試React組件方面做得更好。 測試我正在努力解決的React組件的一個方面是測試子組件對父組件的回調。
測試內部React組件通信的有效方法是什么,例如回調父組件?
對這個問題的回答似乎提供了一個可能的解決方案,雖然我不太了解它(例如,我並不完全熟悉如何在Jasmine測試中使用函數鏈。)
提前感謝任何提示和建議!
例
(以下示例使用Meteor,但我不一定要尋找特定於Meteor的解決方案。)
回購完整的例子 。
假設我有一個接受文本輸入的組件,並通過提交上的props傳遞它:
SingleFieldSubmit = React.createClass({
propTypes: {
handleInput: React.PropTypes.func.isRequired
},
getDefaultProps() {
return {
inputValue: ""
};
},
getInitialState() {
return {
inputValue: this.props.inputValue
};
},
updateInputValue(e){
this.setState({inputValue: e.target.value});
},
handleSubmit(e) {
e.preventDefault();
this.handleInput();
},
handleInput(){
this.props.handleInput(this.state.inputValue.trim());
},
render() {
return (
<form className="single-field-submit" onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.inputValue}
onChange={this.updateInputValue}
/>
</form>
)
}
});
在這里,我想測試組件是否在提交時傳遞用戶輸入。 我目前有點笨重的解決方案是創建一個模擬父組件,我要測試的組件包含在子項中:
MockParentComponent = React.createClass({
getInitialState: function() {
return {
callbackValue: null
};
},
handleCallback: function(value) {
this.setState({callbackValue: value});
},
render: function() {
return (
<div className="container">
<SingleFieldSubmit handleInput={this.handleCallback} />
</div>
)
}
});
然后,我的(Jasmine)測試看起來像這樣。 測試通過。 但是,似乎應該有一種更簡單的方法來做到這一點....
describe('SingleFieldSubmit Component', function () {
it('should, on submit, return the value input into the form', function () {
//SETUP
let mockUserInput = 'Test input';
let parentComponent = TestUtils.renderIntoDocument(
React.createElement(MockParentComponent)
);
let node = ReactDOM.findDOMNode(parentComponent);
let $node = $(node);
expect(parentComponent.state.callbackValue).toBe(null);
//TEST
Simulate.change($node.find('input')[0], { target: { value: mockUserInput } });
Simulate.submit($node.find('form')[0]);
expect(parentComponent.state.callbackValue).toBe(mockUserInput);
});
});
一種不需要父組件的方法是使用茉莉花間諜 。
describe('SingleFieldSubmit Component', function () {
it('should call handleInput prop with value of the input on submit', function () {
//SETUP
let callbackSpy = jasmine.createSpy('callbackSpy');
let mockUserInput = 'Test input';
let component = TestUtils.renderIntoDocument(<SingleFieldSubmit handleInput={callbackSpy} />);
let form = TestUtils.findRenderedDOMComponentWithTag(component, 'form');
let input = TestUtils.findRenderedDOMComponentWithTag(component, 'input')
//TEST
Simulate.change(imput, { target: { value: mockUserInput } });
Simulate.submit(form);
expect(callbackSpy).toHaveBeenCalledWith(mockUserInput);
expect(callbackSpy.calls.count()).toEqual(1);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.