如何断言属性的呈现值？

Question

我是 React and looking at 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;

笑话测试：

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 绑定是正确的。 label 是一个 ReactComponent，我看到有许多可用的属性和方法。查看和测试将呈现的实际值的最佳方法是什么？

Answer 1

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

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

应该是：

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

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

另请注意，您的 label 变量是一个 React 组件实例，它有一个 props 属性，您可以使用它而不是在 DOM 上查找它节点。

如何断言属性的呈现值？

How to assert an attribute's rendered value?

javascript

reactjs

jestjs