我有一个非常困难的时间用React测试任何东西。 TestUtils上的文档很少,没有例子。谷歌似乎只给我一些结果。我使用的是Jasmine,但这并不是让我感到悲痛的部分。
这是我尝试过的最简单的事情:
var BigButton = React.createClass({
render: function () {
return (
<button className="big-submit" data-color={this.props.color} onClick={this.props.action}>{this.props.text}</button>
);
},
foo: function () {},
bar: function () {
this.foo();
}
});
我有
的测试describe('BigButton', function () {
describe('render', function () {
it('creates a button', function () {
var button = <BigButton />;
TestUtils.renderIntoDocument(button);
debugger;
});
});
});
我的问题是如何从外部访问React类中有意义的任何内容?我如何检查渲染是否返回按钮HTML元素?我知道如何使用测试间谍,但我怎么能找到方法foo
来监视,我如何调用bar
?一切似乎都以某种方式完全无法控制。
答案 0 :(得分:4)
我不知道你是否知道,但Facebook写了自己的基于Jasmine的测试库:https://facebook.github.io/jest
他们在这里有一个测试反应教程:https://facebook.github.io/jest/docs/tutorial-react.html
我认为这是如何使用TestUtils的一个很好的例子,即使你不想使用jest。要点是:
renderIntoDocument()
返回对分离的DOM节点的引用findRenderedDOMComponentWithTag()
等帮助程序(请参阅TestUtils)以获取对组件中子节点的引用getDOMNode()
答案 1 :(得分:3)
监视方法,在渲染组件之前,可以通过方法访问方法对象
var methods = ComponentName.prototype.__reactAutoBindMap
然后(用茉莉花)你可以说:
var methodSpy = spyOn(methods, 'methodName').and.callThrough()
然后你可以渲染组件:
widget = TestUtils.renderIntoDocument(React.createElement(ComponentName, params))