Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component

[gajus]

I am writing a test case using Mocha and JSDom.

import React from 'react';
import TestUtils from 'react-addons-test-utils';

describe('ReactOutsideEvent', () => {
    it('captures mousedown event', () => {
        let detachedCoponent;

        detachedCoponent = TestUtils.renderIntoDocument(<div>
            <div className='foo'></div>
        </div>);

        TestUtils.scryRenderedDOMComponentsWithClass(detachedCoponent, 'foo');
    });
});

I'd like to obtain a reference to the generated DOMNode with className "foo". scryRenderedDOMComponentsWithClass produces:

Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component

I have also tried scryRenderedDOMComponentsWithTag and got the same error.

Using 0.14.0-beta3.

[sophiebits]

Yes, this is a breaking change and you'll need to change your tests to be different, sorry. See 4070c4c. detachedCoponent is actually a DOM node now so the test utils can't look into it to find the React component tree any more. This rarely comes up because you'll almost always be testing your own components (it's our job to test that the DOM components work, not yours :)).

[gajus]

Awesome. Thank you.

[benhughes]

@spicyj
Just discovering numerous versions of this error after updating our codebase.

So how would we now test that say after clicking something the class of a div has been updated to hide inside one of our components? Is that something we shouldn't be testing?

[sophiebits]

@benhughes Can you paste a sample test so I can see what you mean?

[sheepsteak]

@benhughes just come across this myself. I've started accessing them as though they were DOM nodes after seeing this SO answer. So for your example div I would now do (Jasmine):

expect(myDiv.className).toContain('hide');

[sophiebits]

@sheepsteak That sounds like a different warning, but I'm glad you got it to work.

[sheepsteak]

You're right, I was searching for two problems at once! My answer above relates to this warning:

Warning: ReactDOMComponent: Do not access .props of a DOM node; instead, recreate the props asrenderdid originally or read the DOM properties/attributes directly from this node (e.g., this.refs.box.className).

[iangreenleaf]

This has caused trouble on some of my tests (and I can see people who have mentioned this ticket with the same problem). I was using nested calls to the selector functions to find the components I was interested in:

    const sections = TestUtils.scryRenderedDOMComponentsWithTag(myPage, 'section');
    expect(sections.length).to.eq(3)
    const headers = sections.map(section => {
      return TestUtils.findRenderedDOMComponentWithTag(section, 'h1').props.children;
    });

It looks like now this is no longer possible, and I don't really see an alternative in the test utils that's functionally equivalent.

[vysinsky]

Hi @iangreenleaf, I've just found a solution which works for me:

Previous code which was failing on this error:

var myComponent = TestUtils.renderIntoDocument(
    <div>
        <MyComponent page={page1} dispatch={dispatch}>Foo</MyComponent>
        <MyComponent page={page2} dispatch={dispatch}>Foo</MyComponent>
    </div>
);

assert.equal(TestUtils.scryRenderedDOMComponentsWithTag(myComponent, 'a').length, 2);

(test checks that component is 'rerendered' after changing its state)

Code which fixed that:

var Wrapper = React.createClass({
    render: function() {
        return (
            <div>{this.props.children}</div>
        );
    }
});

var myComponent = TestUtils.renderIntoDocument(
    <Wrapper>
        <MyComponent page={page1} dispatch={dispatch}>Foo</MyComponent>
        <MyComponent page={page2} dispatch={dispatch}>Foo</MyComponent>
    </Wrapper>
);

assert.equal(TestUtils.scryRenderedDOMComponentsWithTag(myComponent, 'a').length, 2);

As Wrapper is normal React component it does not fail anymore. Hope it will help.

[moroshko]

@iangreenleaf Did you find a solution to the nested lookup issue? I'm stuck with exactly that.

@spicyj Is there any way to do a nested lookup? More specifically, as @iangreenleaf mentioned, I'd like to do:

var elements = scryRendered...
var nestedElements = scryRendered...(elements[0], ...)

But, TestUtils complains:

Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component

[idoo]

I have same issue, with 0.14.3
Error: Invariant Violation: findAllInRenderedTree(...): instance must be a composite component
please give me a worked solution to find element with 0.14.3

[iangreenleaf]

@moroshko Nope 😿 Our solution is to find a different tool, and abandon TestUtils for all but the most low-level unit tests.

[moroshko]

@iangreenleaf What tool did you end up with?

[iangreenleaf]

@moroshko Haven't settled on anything yet, but we'll probably be looking for something more integration-oriented that works with the real DOM and XPath/CSS-style selectors. For the moment we're just sticking with Capybara (since we are already running Ruby). The limited scope of TestUtils is fine for testing individual components, but is unwieldy when actually simulating user interactions.

[sophiebits]

I have not tried https://github.com/airbnb/enzyme but it looks promising.