testing text values in React

Question

Using Mocha, Karma, and React test tools to test the following simple function:

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

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

I'm splitting the test cases up into three cases: 1. incompleteCount=0, 2. incompleteCount=1, 3. incompleteCount=2.

In the first case, I would expect the following output (more or less):

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

and would test against that. What I am actually seeing(from dump()) is:

  <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>

Is there a good way to test the value of the text inside of the main span? I'm looking for something equivalent to .val() or .text() in jQuery.

TestUtils.findRenderedDOMComponentWithClass('todo-count').getDOMNode().textContent — Henrik Andersson
– Henrik Andersson, Commented Sep 15, 2015 at 6:02
Not related to your question, but to do conditional plurals you should do const itemWord = incompleteCount !== 0 ? 'item' : 'items'; — David Gilbertson
– David Gilbertson, Commented Sep 15, 2015 at 7:18
interesting, I grabbed that part of the code from a tutorial. why is this? — fox
– fox, Commented Sep 16, 2015 at 7:59

Henrik Andersson · Accepted Answer · 2015-09-15 07:06:13Z

1

By using the TestUtils that comes bundled with React you can extract the actual DOM node and use the .textContent property in order to get the text.

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

answered Sep 15, 2015 at 7:06

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yonatan Kogan Over a year ago

getDOMNode has been deprecated btw. It's not React.findDOMNode(component)

Henrik Andersson Over a year ago

Right you are, sir! Thanks!

Collectives™ on Stack Overflow

testing text values in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related