在 React 中测试文本值答案

【问题标题】：testing text values in React在 React 中测试文本值
【发布时间】：2015-09-15 05:21: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() 等效的东西。

【问题讨论】：

TestUtils.findRenderedDOMComponentWithClass('todo-count').getDOMNode().textContent
做到了！谢谢！
与您的问题无关，但要使用条件复数，您应该使用const itemWord = incompleteCount !== 0 ? 'item' : 'items';
有趣，我从教程中获取了那部分代码。这是为什么？

标签： javascript jquery unit-testing reactjs mocha.js

【解决方案1】：

通过使用与 React 捆绑在一起的 TestUtils，您可以提取实际的 DOM 节点并使用 .textContent 属性来获取文本。

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

【讨论】：

getDOMNode 顺便说一句已被弃用。不是React.findDOMNode(component)
是的，先生！谢谢！