在 React 中测试文本值

Question

使用 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() 的东西

Answer 1

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

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

在 React 中测试文本值

testing text values in React

javascript

jquery

unit-testing

mocha.js

reactjs