An example showing how to test the content of a wix-style-react Modal (same approach for Tooltip)

ModelExample.js

import React from 'react';
import Modal from 'wix-style-react/Modal';
import Button from 'wix-style-react/Button';
import {MessageBoxFunctionalLayout} from 'wix-style-react/MessageBox';

class ModalExample extends React.Component {
  state = {open: false};

  handleToggleModal = () => this.setState({open: !this.state.open});

  render() {
    return (
      <div>
        <Button dataHook="button" onClick={this.handleToggleModal}>Open Modal</Button>
        <Modal
          datahook="modal"
          isOpen={this.state.open}
        >
          <MessageBoxFunctionalLayout
            dataHook="messageBox"
            theme="blue"
            title="title"
            confirmText="OK"
            cancelText="Cancel"
            onOk={this.handleToggleModal}
            onCancel={this.handleToggleModal}
          >
            Hello blue world!
          </MessageBoxFunctionalLayout>
        </Modal>
      </div>
    );
  }
}

export default ModalExample;

ModelExample.spec.js

import 'jsdom-global/register';
import React from 'react';
import {expect} from 'chai';
import {mount} from 'enzyme';
import eventually from 'wix-eventually';
import ModalExample from './ModalExample';
//enzyme drivers
import {modalTestkitFactory, buttonTestkitFactory} from 'wix-style-react/dist/testkit/enzyme';
//vanila js drivers
import {messageBoxFunctionalLayoutTestkitFactory} from 'wix-style-react/dist/testkit';

describe('ModalExample', () => {
  let wrapper, mountingDiv;

  beforeEach(() => {
    //mount the component using enzyme to a div that is placed on the body, as the modal will be portaled there
    mountingDiv = document.createElement('div');
    document.body.appendChild(mountingDiv);
    wrapper = mount(<ModalExample/>, {attachTo: mountingDiv});
  });

  afterEach(() => {
    wrapper.detach();
    document.body.removeChild(mountingDiv);
  });

  it('renders the modal content correctly', async () => {
    // create the Button and Modal drivers based on
    const buttonDriver = buttonTestkitFactory({wrapper, dataHook: 'button'});
    const modalDriver = modalTestkitFactory({wrapper, dataHook: 'modal'});

    //open the modal
    buttonDriver.click();
    expect(modalDriver.isOpen()).to.equal(true);

    //create the internal component driver based on the vanilla version, as you pass in an html node instead of an enzyme wrapper
    const messageBoxDriver = messageBoxFunctionalLayoutTestkitFactory({wrapper: document.body, dataHook: 'messageBox'});
    expect(messageBoxDriver.clickOnConfirmationButton());
    await eventually(() => expect(modalDriver.isOpen()).to.equal(false));
  });
});