1

react-relative-portal is a package that is used to create the html outside the component so as to ignore the overflow properties. The issue being that when I test the react component and the part that I want to test is outside the scope of the mounted component.I am not sure how to proceed with testing it.

class MyComponent extends Component{
    constructor(){
        this.state={
        showPotal: false
        }
    }
    handleClick = () => {
        this.setState((prevState) =>{
        showPortal: !prevState.showPortal
        })
    }
    render(){
        <button onClick={this._handleClick}>show portal</button>
            {this.state.showPortal && (
                <RelativePortal component="div">
                        <Portal />
                </RelativePortal>
            )}
    }
}

As you can see since <Portal /> is inside <RelativePortal /> and thus rendered outside the component. I am not sure how to find the <Portal /> in the context of <MyComponent />

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Dreak441
  • 49
  • 4
  • I'm not sure about `` but you can test `` with traversing through `global.document` as shown at https://stackoverflow.com/questions/48094581/testing-react-portals-with-enzyme – skyboyer Dec 10 '18 at 13:14

0 Answers0