Flaky Jest test: EditWysiwygComposer › Should not render the component when not ready #31227
Description
Steps to reproduce
https://github.com/element-hq/element-web/actions/runs/19295585931/job/55176632212?pr=31225
FAIL test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
● EditWysiwygComposer › Should not render the component when not ready
expect(element).toHaveAttribute("contentEditable", "true") // element.getAttribute("contentEditable") === "true"
Expected the element to have attribute:
contentEditable="true"
Received:
contentEditable="false"
Ignored nodes: comments, script, style
<html>
<head />
<body>
<div>
<div
class="mx_EditWysiwygComposer"
data-testid="WysiwygComposer"
>
<div
class="mx_WysiwygComposer_AutoCompleteWrapper"
data-testid="autocomplete-wrapper"
/>
<div
class="mx_FormattingButtons"
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<svg
class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
/>
</svg>
</button>
<button
aria-label="Italic"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<svg
class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
/>
</svg>
</button>
<button
aria-label="Underline"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<svg
class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 21a.97.97 0 0 1-.713-.288A.97.97 0 0 1 5 20q0-.424.287-.712A.97.97 0 0 1 6 19h12q.424 0 .712.288.288.287.288.712 0 .424-.288.712A.97.97 0 0 1 18 21zm6-4q-2.525 0-3.925-1.575t-1.4-4.175V4.275q0-.525.388-.9A1.27 1.27 0 0 1 7.975 3q.525 0 .9.375t.375.9V11.4q0 1.4.7 2.275t2.05.875 2.05-.875.7-2.275V4.275q0-.525.387-.9A1.27 1.27 0 0 1 16.05 3q.525 0 .9.375t.375.9v6.975q0 2.6-1.4 4.175T12 17"
/>
</svg>
</button>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<svg
class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
/>
</svg>
</button>
<button
aria-label="Bulleted list"
class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
role="button"
tabindex="0"
>
<svg
class="mx_FormattingButtons_Icon"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 7.5q-.618 0-1.06-.44A1.44 1.44 0 0 1 3 6q0-.618.44-1.06.442-.44 1.06-.44t1.06.44Q6 5.383 6 6t-.44 1.06q-.44.44-1.06.44m4.788 11.213Q9.575 19 10 19h10q.424 0 .712-.288A.97.97 0 0 0 21 18a.97.97 0 0 0-.288-.712A.97.97 0 0 0 20 17H10a.97.97 0 0 0-.713.288A.97.97 0 0 0 9 18q0 .424.287.712m.001-5.999Q9.575 13 10 13h10q.424 0 .712-.287A.97.97 0 0 0 21 12a.97.97 0 0 0-.288-.713A.97.97 0 0 0 20 11H10a.97.97 0 0 0-.713.287A.97.97 0 0 0 9 12q0 .424.287.713m.001-6Q9.575 7 10 7h10q.424 0 .712-.287A.97.97 0 0 0 21 6a.97.97 0 0 0-.288-.713A.97.97 0 0 0 20 5H10a.97.97 0 0 0-.713.287A.97.97 0 0 0 9 6q0 .424.287....
56 | // When
57 | const { rerender } = customRender(false);
> 58 | await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
| ^
59 |
60 | rerender(
61 | <MatrixClientContext.Provider value={mockClient}>
at toHaveAttribute (test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx:58:65)
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:520:19)