title: testing text values in React
body: <p>Using Mocha, Karma, and React test tools to test the following simple function:</p>
  
  <pre><code>renderTodoCount() {
      const { incompleteCount } = this.props;
      const itemWord = incompleteCount === 1 ? 'item' : 'items';
  
      return (
        &lt;span className='todo-count'&gt;
          &lt;strong&gt;{incompleteCount || 'No'}&lt;/strong&gt; {itemWord} left
        &lt;/span&gt;
      );
  }
  </code></pre>
  
  <p>I'm splitting the test cases up into three cases: 1. <code>incompleteCount=0</code>, 2. <code>incompleteCount=1</code>, 3. <code>incompleteCount=2</code>.</p>
  
  <p>In the first case, I would expect the following output (more or less):</p>
  
  <pre><code>  &lt;span className='todo-count'&gt;
      &lt;strong&gt;No&lt;/strong&gt; items left
    &lt;/span&gt;
  </code></pre>
  
  <p>and would test against that. What I am actually seeing(from <code>dump()</code>) is:</p>
  
  <pre><code>  &lt;span class="todo-count" data-reactid=".0.0"&gt;
      &lt;strong data-reactid=".0.0.0"&gt;No&lt;/strong&gt;&lt;span data-reactid=".0.0.1"&gt;&lt;/span&gt;&lt;span data-reactid=".0.0.2"&gt;items&lt;/span&gt;&lt;span data-reactid=".0.0.3"&gt; left&lt;/span&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p>Is there a good way to test the value of the text inside of the main span? I'm looking for something equivalent to <code>.val()</code> or <code>.text()</code> in jQuery.</p>