在React中测试文本值

testing text values in React

本文关键字：测试文本 React      更新时间：2023-09-26

使用Mocha、Karma和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>

有没有一个好的方法来测试主跨度内文本的值？我正在jQuery中寻找与.val()或.text()等效的东西。

通过使用React附带的TestUtils，您可以提取实际的DOM节点，并使用.textContent属性来获取文本。

TestUtils.findRenderedDOMComponentWithClass('todo-count').getDOMNode().textCont‌​ent
相关文章：