Javascript 如何断言属性'；渲染值是多少？

我是新来的，并将其视为一个潜在的单元测试解决方案。然而，我发现如何在

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;

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

var Label=React.createClass({
render:function（）{
if（this.props.targetName）{
返回(
{this.props.content}
);
}
返回(
{this.props.content}
);
}
});
module.exports=标签；

玩笑测试：

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

description（'Label sub-component'，function（））{
var Label=require（'../../../views/Label'）；
它（'具有正确的目标元素名称'，函数（）{
var labelDocument=TestUtils.renderIntoDocument(
);
var label=TestUtils.findRenderedomComponentWithTag（labelDocument，'label'）；
expect（label.getDOMNode（）.getAttribute（'for'））.toEqual（'foobar'）；//实际返回{this.props.targetName}
});
});

---

因此，正如您所看到的，我不确定这里的expect断言。我希望值

foobar

以正确的元素呈现。然后，我可以确保

props

绑定是正确的<代码>标签是一个

组件

，我看到了许多可用的属性和方法。查看和测试将呈现的实际值的最佳方法是什么？

问题是您有语法错误。这一行：

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

{this.props.content}

应该是：

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

{this.props.content}

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

---

还要注意，您的

label

变量是一个React组件实例，它有一个

props

属性，您可以使用它来代替在DOM节点上查找它。

谢谢，我想这是我的问题。奇怪的是，“语法问题”在浏览器中表现得很好。其实，这不是语法错误，我的错误是用这种方式表达的。它只是字符串中的有效代码，Javascript引擎无法知道它是代码而不是字符串（请记住，JSX中{and}中的所有内容都是Javascript）。谢谢。我想这是有道理的。但是，必须有某种方法让react知道，因为它在浏览器中呈现良好：）。如果没有办法知道，那么我希望看到

{this.props.targetName}

呈现。我现在已经检查过了，这确实是问题的根源。所以，非常感谢你的帮助。