Cannot find Component with Tag in reactjs TestUtils

Question

I've been trying to figure out why this isn't working for a few days. I am having a really hard time getting reactjs TestUtils to work even when I reduced it to the most simple of examples:

describe('Layout', function() {
    it('try to find className', function(done) {
        var Wrapper = React.createClass({
            render: function() {
                return <div className="testWrapper">Hello <span>Jim</span></div>;
            }
        });

    var TestWrap = React.createClass({
        render() {
            return (
                <div>
                    <p>Test this </p>
                    <Wrapper />
                </div>
            );
        }
    })

    var renderedTree = TestUtils.renderIntoDocument(<TestWrap />);
    var renderedMyComponent = TestUtils.findRenderedDOMComponentWithTag(renderedTree, 'div');
    done();
});

I am getting this error:

Error: Did not find exactly one match for tag:div
    at Object.ReactTestUtils.findRenderedDOMComponentWithTag (/Users/bli1/Development/QE/data-trader/data-trader/spec/views/layout.js:22398:14)
    at Context.<anonymous> (/Users/bli1/Development/QE/data-trader/data-trader/spec/views/layout.js:148:46)

Chrome 44.0.2403 (Mac OS X 10.10.4): Executed 1 of 1 (1 FAILED) ERROR (0.041 secs / 0.007 secs)

Now when I change to look for span, it works...

Same code but replace

var renderedMyComponent = TestUtils.findRenderedDOMComponentWithTag(renderedTree, 'div');

with

var renderedMyComponent = TestUtils.findRenderedDOMComponentWithTag(renderedTree, 'span');

result:

Executed 1 of 1 SUCCESS (0.039 secs / 0.007 secs)

What's the result of TestUtils.scryRenderedDOMComponentsWithTag()? I can't help but notice your example contains two divs and that would violate the find function's assumption that there's only one result. — DallonF
– DallonF, Commented Aug 18, 2015 at 16:50
@DallonF took your suggestion and this was the output: dpaste.com/16QN283 — Liondancer
– Liondancer, Commented Aug 18, 2015 at 16:55
@DallonF I think the console.log() is actually causing the error. Would you know why? Also, youre correct about the multiple divs — Liondancer
– Liondancer, Commented Aug 18, 2015 at 16:58

ycdesu · Accepted Answer · 2015-08-28 01:42:01Z

6

The document says

Like scryRenderedDOMComponentsWithTag() but expects there to be one result...

Because there're two <div> blocks in your component, you have to use scryRenderedDOMComponentsWithTag() instead of findRenderedDOMComponentWithTag() to get the array and use array[0], array[1] to get components in your TestWrap and Wrapper components.

edited Aug 28, 2015 at 1:42

answered Aug 28, 2015 at 1:22

ycdesu

7351 gold badge4 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Cannot find Component with Tag in reactjs TestUtils

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related