我是 React 的新手看着 Jest作为潜在的单元测试解决方案。但是,我发现很难找出如何简单地断言 ReactComponent
中呈现的属性值。我不确定这是不是因为通常的做法是不渲染并查看实际值,或者我只是还没有找到一个好的例子。
所以,这是我正在使用的:
标签组件:
var Label = React.createClass({
render: function() {
if (this.props.targetName) {
return (
<label htmlFor="{this.props.targetName}">{this.props.content}</label>
);
}
return (
<label>{this.props.content}</label>
);
}
});
module.exports = Label;
Jest 测试:
describe('Label sub component', function() {
var Label = require('../../../views/label');
it('has the correct target element name', function() {
var labelDocument = TestUtils.renderIntoDocument(
<Label targetName="foobar" content="Upload Files:"/>
);
var label = TestUtils.findRenderedDOMComponentWithTag(labelDocument, 'label');
expect(label.getDOMNode().getAttribute('for')).toEqual('foobar'); // actually returns {this.props.targetName}
});
});
因此,如您所见,我不确定此处的 expect 断言。我希望值 foobar
呈现在正确的元素中。然后,我可以确保 props
绑定(bind)是正确的。 label
是一个 ReactComponent
,我看到有许多可用的属性和方法。查看和测试将呈现的实际值的最佳方法是什么?
最佳答案
问题是你有一个语法错误。这一行:
<label htmlFor="{this.props.targetName}">{this.props.content}</label>
应该是:
<label htmlFor={this.props.targetName}>{this.props.content}</label>
请注意,属性值周围没有引号。
另请注意,您的 label
变量是一个 React 组件实例,它具有一个 props
属性,您可以使用该属性而不是在 DOM 节点上查找它。
关于javascript - 如何断言属性的呈现值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29882520/