Как утверждать значение атрибута?

Question

Я новичок в React и смотрю на Jest как потенциальное решение для тестирования модулей. Тем не менее, мне было удивительно сложно выяснить, как просто утвердить значение атрибута rendered в 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 является экземпляром компонента React, который имеет свойство props, которое вы можете использовать вместо поиска на узле DOM.