如何断言属性的值呈现？(How to assert an attribute's rende

我是新来作出反应 ，看着玩笑作为一个潜在的单元测试解决方案。 然而，我发现它令人惊讶的很难找出如何简单断言在渲染属性值ReactComponent 。 我不知道这是因为通常的做法是不渲染和看到的实际值，或者如果我只是没有找到一个很好的例子呢。

所以，这里是我的工作：

Label组件：

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;

这是一个测试：

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

所以，你可以看到，我不能确定的期望在这里断言。 我想期待值foobar是正确的元素呈现。 然后，我可以确保该props结合是正确的。 label是一个ReactComponent ，我看到许多属性和方法。 什么是一看就知道将呈现的最佳方式和测试的实际价值？

Answer 1:

问题是，你有一个语法错误。 这条线：

<label htmlFor="{this.props.targetName}">{this.props.content}</label>

应该：

<label htmlFor={this.props.targetName}>{this.props.content}</label>

请注意，有属性值周围没有引号。

还要注意的是你的label变量是一个阵营组件实例，其中有一个props ，你可以改用寻找它的DOM节点上的性能。

文章来源: How to assert an attribute's rendered value?