Can't find React Component.

[windyGex]

Consider the following code，Why wrapper can't find Content？

it will be error expected 0 to equal 1.

import React from 'react';
import {mount} from 'enzyme';
import ReactDOM from 'react-dom';
import expect from 'expect.js';

class Content extends React.Component {
    render() {
        return <span>content</span>
    }
}

class Gateway extends React.Component {
    render() {
        return null
    }

    componentDidMount() {
        this.renderOverlay()
    }

    componentDidUpdate() {
        this.renderOverlay()
    }

    renderOverlay() {
        if (!this.wrapper) {
            this.wrapper = document.createElement('div');
            document.body.appendChild(this.wrapper);
        }
        ReactDOM.unstable_renderSubtreeIntoContainer(this, this.props.children, this.wrapper);
    }
}

class App extends React.Component {
    render() {
        return <Gateway><Content/></Gateway>
    }
}

describe('test', () => {
    it('shoud support find Content', () => {
        const wrapper = mount(<App/>)
        expect(wrapper.find(Gateway).length).to.equal(1);
       // Will be error 
        expect(wrapper.find(Content).length).to.equal(1);
    });
})

[travisperson]

I ran into this issue when using React Bootstrap and their modals / portals. My understanding is that Enzyme only looks for rendered children. In this case Gateway is not rendering anything.

Instead I had to grab the child from the props.

const dialog = wrapper.find('Portal');·                                                                          
const confirmDialog = new ReactWrapper(dialog.node.props.children);

Note: dialog.prop('children') may also work for this, didn't test that.

[aweary]

Yeah I'm pretty sure using renderSubtreeIntoContainer is not going to work with enzyme out of the box. In most cases you'll have to find out of the component holds a reference to the portal and see if you can use that.

@windyGex in your example it doesn't seem like anything is calling the renderOverlay method so it seems like it's working as expected.

Closing as this is essentially a duplicate of #252

[alexdong]

I've been searching for the right solution for quite a while and @travisperson's solution is the only one that works with Enzyme. Just in case others are looking for some solutions.

[oliviertassinari]

@travisperson's solution seems to no longer work with enzyme v3.

My bad it does :).

[davetorre]

@travisperson 's solution worked for me once I changed node to getNode(). Last line becomes const confirmDialog = new ReactWrapper(dialog.getNode().props.children).