тестирования текстовых значений в React

Question

Использования Мокко, карму и React тестовых инструментов, чтобы проверить следующую простую функцию:

renderTodoCount() { 
    const { incompleteCount } = this.props; 
    const itemWord = incompleteCount === 1 ? 'item' : 'items'; 

    return (
     <span className='todo-count'> 
     <strong>{incompleteCount || 'No'}</strong> {itemWord} left 
     </span> 
    ); 
} 

Я разделив тестовые случаи на три случая: 1. incompleteCount=0, 2. incompleteCount=1 , 3. incompleteCount=2.

В первом случае, я ожидал бы следующий результат (более или менее):

<span className='todo-count'> 
    <strong>No</strong> items left 
    </span> 

и испытал бы против этого. То, что я на самом деле видим (от dump()) является:

<span class="todo-count" data-reactid=".0.0"> 
    <strong data-reactid=".0.0.0">No</strong><span data-reactid=".0.0.1"></span><span data-reactid=".0.0.2">items</span><span data-reactid=".0.0.3"> left</span> 
</span> 

Есть хороший способ проверить значение текста внутри основного пролета? Я ищу что-то эквивалентное .val() или .text() в jQuery.

Answer 1

Используя TestUtils, входящий в комплект поставки React, вы можете извлечь фактический узел DOM и использовать свойство .textContent, чтобы получить текст.

TestUtils.findRenderedDOMComponentWithClass('todo-count').getDOMNode().textCont‌​ent