Fix `EuiSelectable` not rendering correctly in jsdom env

[weronikaolejniczak]

Describe the bug When EuiSelectable is rendered in a jsdom environment, for some reason it ends up rendered as:

<div class="euiSelectable css-1tyip8k-euiSelectable">
  <div style="min-width: 20rem;">
    <div
      class="euiSelectableList css-1tl92f6-euiSelectableList"
      data-test-subj="euiSelectableList"
    >
      <div style="overflow: visible; width: 0px;" />
      <div class="resize-triggers">
        <div class="expand-trigger">
          <div style="width: 1px; height: 1px;" />
        </div>
        <div class="contract-trigger" />
      </div>
    </div>
  </div>
</div>
</div>

with no options. Applying listProps={{ isVirtualized: false }} works:

but it's not something that should be done on consumer side. EUI disables virtualization in test environments to prevent this type of behavior. Apparently, something is not working quite right.

Impact and severity It's not an end-user issue because EuiSelectable is correctly rendered in the browser. It's a Cloud UI developer issue.

Environment and versions

• EUI version: 102.3.0
• React version: 18.0.0
• Kibana version (if applicable): ~
• Browser: ~
• Operating System: MacOS

Minimum reproducible sandbox Codesandbox

To Reproduce If unable to access the above-mentioned sandbox, here are the steps to reproduce the behavior:

1. Setup the environment: React v18, EUI, Jest, RTL, jsdom env
2. Render EuiSelectable.
3. Write a test asserting EuiSelectable options.

Options are not found and screen.debug() produces empty divs.

Expected behavior EuiSelectable should render correctly in jsdom environment, i.e. options should be targetable.

Screenshots

Additional context ~

[tkajtoch]

Estimated as 3 points and set high priority. This needs looking into, it's likely related to the virtualization library or is affected by the concurrent rendering happening in React 18. In any case, there are unknowns.