Flaky Jest test: MemberListView and MemberlistHeaderView › MemberListView › Memberlist is re-rendered on unreachable presence event #31334
Description
https://github.com/element-hq/element-web/actions/runs/19645433178/job/56259431674?pr=31293
expect(received).not.toBeNull()
Received: null
Ignored nodes: comments, script, style
<html>
<head />
<body>
<div>
<div
aria-labelledby="memberlist-panel-tab"
class="mx_BaseCard mx_MemberListView"
id="memberlist-panel"
role="tabpanel"
>
<div
class="mx_BaseCard_header"
>
<div
class="mx_BaseCard_header_title"
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
role="heading"
>
People
</p>
</div>
<button
aria-labelledby="_r_0_"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
<div
class="mx_AutoHideScrollbar"
tabindex="-1"
>
<div
class="_flex_4dswl_9 mx_MemberListView_container"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<form
class="_root_19upo_16"
>
<header
class="_flex_4dswl_9 mx_MemberListHeaderView"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<div
class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 mx_MemberListHeaderView_label"
>
6 Members
</div>
</header>
</form>
<div
aria-label="Member list"
data-testid="virtuoso-scroller"
data-virtuoso-scroller="true"
role="listbox"
style="height: 100%; outline: none; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch;"
tabindex="0"
>
<div
data-viewport-type="element"
style="height: 100%; position: absolute; top: 0px; width: 100%;"
>
<div
data-testid="virtuoso-item-list"
style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
>
<div
data-index="0"
data-item-index="0"
data-known-size="56"
style="overflow-anchor: none;"
>
<div>
<div
aria-label="@admin0:localhost"
aria-posinset="1"
aria-setsize="6"
class="mx_AccessibleButton mx_MemberTileView"
role="option"
tabindex="0"
>
<div
aria-hidden="true"
class="mx_MemberTileView_left"
>
<div
class="mx_MemberTileView_avatar"
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
data-color="5"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 32px;"
title="@admin0:localhost"
>
a
</span>
<div
class="mx_PresenceIconView"
>
<svg
class="mx_PresenceIconView_online"
fill="currentColor"
height="8px"
viewBox="0 0 8 8"
width="8px"
...
143 | });
144 | await waitFor(() => {
> 145 | expect(root.container.querySelector(".mx_PresenceIconView_unavailable")).not.toBeNull();
| ^
146 | });
147 | });
148 |
at toBeNull (test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx:145:94)
at runWithExpensiveErrorDiagnosticsDisabled (node_modules/@testing-library/dom/dist/config.js:47:12)
at checkCallback (node_modules/@testing-library/dom/dist/wait-for.js:124:77)
at checkRealTimersCallback (node_modules/@testing-library/dom/dist/wait-for.js:118:16)
at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:579:19)