rendering empty div

Hello @DimitryDushkin ,

I am trying to unit test my notification bar and during the test, SlidingPane is rendering an empty div. I have tried everything I could. Maybe a third eye could help me find out the issue. Please let me know if you have any suggestions for me. Thanks in advance !!

My Component

<div ref={(ref) => (this.el = ref)}>
        <SlidingPane
          className="notification"
          overlayClassName="notification__overlay"
          isOpen={this.props.showNotificationPanel}
          from="right"
          onRequestClose={() => {
            this.props.showNotification(false);
          }}>
          //some code
        </SlidingPane>

</div>

My Test

it('renders', () => {
    wrapper = mountWithIntl(<ShowNotification {...minProps} showNotificationPanel={true} />, 'en');
    console.log("wrapper", wrapper.html()); // outputs <div><!-- react-empty: 2 --></div>
    expect(
      wrapper.children().hasClass('notification')
    ).to.equal(true);
  });

[gurusewak]

Thanks everyone for your input. There were some solutions in the past using node.portal but its deprecated now. I was able to make it work for now using the following code but I don’t think its the best approach so I will keep looking for a better approach and will post it here if I find something. Meanwhile you can use this code to test your component.

My Component

<div ref={(ref) => (this.el = ref)}>
        <SlidingPane
          className="notification"
          overlayClassName="notification__overlay"
          isOpen={this.props.showNotificationPanel}
          from="right"
          onRequestClose={() => {
            this.props.showNotification(false);
          }}>
          //some code
        </SlidingPane>

</div>

My Test

it('has classes', () => {
    wrapper = shallowWithIntl(<ShowNotification {...minProps} showNotificationPanel={true} />, 'en');
    const Content = document.body.firstChild; //for some people it can be lastChild
    expect(
      Content.querySelector('.notification__card__content span').innerHTML
    ).to.equal('Your Content');
  });

[DimitryDushkin]

I will think how to make it testable