From 1d1401c571a98ec69996c47f17421a87527f125a Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 29 Sep 2026 12:02:18 +0200 Subject: [PATCH 1/4] Fix numberinput tests --- .../lib/src/number-input/NumberInput.test.tsx | 200 ++++++++++-------- 1 file changed, 112 insertions(+), 88 deletions(-) diff --git a/packages/lib/src/number-input/NumberInput.test.tsx b/packages/lib/src/number-input/NumberInput.test.tsx index b6e36c508e..f0f3a37f78 100644 --- a/packages/lib/src/number-input/NumberInput.test.tsx +++ b/packages/lib/src/number-input/NumberInput.test.tsx @@ -27,7 +27,8 @@ describe("Number input component tests", () => { const number = getByLabelText("Number label") as HTMLInputElement; expect(number.disabled).toBeTruthy(); }); - test("Number input is read only and cannot be incremented or decremented using the actions", () => { + test("Number input is read only and cannot be incremented or decremented using the actions", async () => { + const user = userEvent.setup(); const { getByLabelText, queryByRole, getAllByRole } = render(); const number = getByLabelText("Number label") as HTMLInputElement; expect(number.readOnly).toBeTruthy(); @@ -36,9 +37,9 @@ describe("Number input component tests", () => { // The action icons should still be visible but not clickable const actionIcons = getAllByRole("img", { hidden: true }); expect(actionIcons.length).toBe(2); - userEvent.click(actionIcons[0]!); + await user.click(actionIcons[0]!); expect(number.value).toBe(""); - userEvent.click(actionIcons[1]!); + await user.click(actionIcons[1]!); expect(number.value).toBe(""); }); test("Number input is read only and cannot be incremented or decremented using the arrow keys", () => { @@ -54,15 +55,16 @@ describe("Number input component tests", () => { const { getByText } = render(); expect(getByText("(Optional)")).toBeTruthy(); }); - test("Number input is not optional: required field, displays error if not filled in", () => { + test("Number input is not optional: required field, displays error if not filled in", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const onChange = jest.fn(); const { getByLabelText } = render( ); const number = getByLabelText("Number input label"); - userEvent.type(number, "1"); - userEvent.clear(number); + await user.type(number, "1"); + await user.clear(number); fireEvent.blur(number); expect(onBlur).toHaveBeenCalled(); expect(onBlur).toHaveBeenCalledWith({ @@ -88,18 +90,20 @@ describe("Number input component tests", () => { const { getByText } = render(); expect(getByText("Error message.")).toBeTruthy(); }); - test("onChange function is called correctly", () => { + test("onChange function is called correctly", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByLabelText } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "t"); + await user.type(number, "t"); expect(onChange).not.toHaveBeenCalledWith({ value: "t" }); expect(number.value).toBe(""); - userEvent.type(number, "1"); + await user.type(number, "1"); expect(onChange).toHaveBeenCalledWith({ value: "1" }); expect(number.value).toBe("1"); }); - test("Error message is shown if the typed value is less than the min value", () => { + test("Error message is shown if the typed value is less than the min value", async () => { + const user = userEvent.setup(); const onChange = jest.fn(({ value, error }) => { expect(value).toBe("-1"); expect(error).toBe("Value must be greater than or equal to 0."); @@ -112,41 +116,44 @@ describe("Number input component tests", () => { ); const number = getByLabelText("Number input label"); - userEvent.type(number, "-1"); + await user.type(number, "-1"); fireEvent.blur(number); }); - test("Cannot decrement the value if it is less than the min value", () => { + test("Cannot decrement the value if it is less than the min value", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "1"); + await user.type(number, "1"); fireEvent.blur(number); expect(number.value).toBe("1"); const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("1"); }); - test("Increment the value when it is less than the min value", () => { + test("Increment the value when it is less than the min value", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "1"); + await user.type(number, "1"); fireEvent.blur(number); expect(number.value).toBe("1"); const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("5"); }); - test("Error message is shown if the typed value is greater than the max value", () => { + test("Error message is shown if the typed value is greater than the max value", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByLabelText } = render( ); const number = getByLabelText("Number input label"); - userEvent.type(number, "12"); + await user.type(number, "12"); expect(onChange).toHaveBeenCalledTimes(2); expect(onChange).toHaveBeenCalledWith({ value: "12", @@ -159,118 +166,124 @@ describe("Number input component tests", () => { error: "Value must be less than or equal to 10.", }); }); - test("Cannot increment the value if it is greater than the max value", () => { + test("Cannot increment the value if it is greater than the max value", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "12"); + await user.type(number, "12"); fireEvent.blur(number); expect(number.value).toBe("12"); const decrement = getAllByRole("button")[1]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("12"); }); - test("Decrement the value when it is greater than the max value", () => { + test("Decrement the value when it is greater than the max value", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "120"); + await user.type(number, "120"); fireEvent.blur(number); expect(number.value).toBe("120"); const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("10"); }); - test("Increment and decrement the value with min and max values", () => { + test("Increment and decrement the value with min and max values", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "1"); + await user.type(number, "1"); fireEvent.blur(number); expect(number.value).toBe("1"); const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("1"); const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("5"); if (increment) { - userEvent.click(increment); - userEvent.click(increment); - userEvent.click(increment); - userEvent.click(increment); - userEvent.click(increment); + await user.click(increment); + await user.click(increment); + await user.click(increment); + await user.click(increment); + await user.click(increment); } expect(number.value).toBe("10"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("10"); }); - test("Increment and decrement the value with an integer step", () => { + test("Increment and decrement the value with an integer step", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "10"); + await user.type(number, "10"); fireEvent.blur(number); expect(number.value).toBe("10"); const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("15"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("20"); const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("15"); if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("10"); }); - test("Increment and decrement the value with a decimal step", () => { + test("Increment and decrement the value with a decimal step", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "-9"); + await user.type(number, "-9"); fireEvent.blur(number); expect(number.value).toBe("-9"); const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("-8.5"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("-8"); const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); - userEvent.click(decrement); - userEvent.click(decrement); + await user.click(decrement); + await user.click(decrement); + await user.click(decrement); } expect(number.value).toBe("-9.5"); if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("-10"); }); - test("Increment and decrement the value with min, max and step", () => { + test("Increment and decrement the value with min, max and step", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "1"); + await user.type(number, "1"); fireEvent.blur(number); expect(onBlur).toHaveBeenCalledWith({ value: "1", @@ -278,35 +291,36 @@ describe("Number input component tests", () => { }); const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("5"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("13"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("13"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("13"); const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("5"); if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("5"); if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } }); - test("Start incrementing from 0 when the min value is less than 0 and the max value is bigger than 0", () => { + test("Start incrementing from 0 when the min value is less than 0 and the max value is bigger than 0", async () => { + const user = userEvent.setup(); const onBlur = jest.fn(); const { getByLabelText, getAllByRole } = render( @@ -314,115 +328,123 @@ describe("Number input component tests", () => { const number = getByLabelText("Number input label") as HTMLInputElement; const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("1"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("2"); }); - test("Start incrementing from 0 when the min value is less than 0 and the max is 0", () => { + test("Start incrementing from 0 when the min value is less than 0 and the max is 0", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("0"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("0"); }); - test("Start incrementing from the min value when it is bigger than 0", () => { + test("Start incrementing from the min value when it is bigger than 0", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("2"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("2.5"); }); - test("Start incrementing from the max value when it is less than 0", () => { + test("Start incrementing from the max value when it is less than 0", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; const increment = getAllByRole("button")[1]; if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("-1"); if (increment) { - userEvent.click(increment); + await user.click(increment); } expect(number.value).toBe("-1"); }); - test("Start decrementing from 0 when the min value is less than 0 and the max value is bigger than 0", () => { + test("Start decrementing from 0 when the min value is less than 0 and the max value is bigger than 0", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("-1"); }); - test("Start decrementing from 0 when the min value is 0 and the max value is bigger than 0", () => { + test("Start decrementing from 0 when the min value is 0 and the max value is bigger than 0", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("0"); }); - test("Start decrementing from the min value when it is bigger than 0", () => { + test("Start decrementing from the min value when it is bigger than 0", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("2"); if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("2"); }); - test("Start decrementing from the max value when it is less than 0", () => { + test("Start decrementing from the max value when it is less than 0", async () => { + const user = userEvent.setup(); const { getByLabelText, getAllByRole } = render( ); const number = getByLabelText("Number input label") as HTMLInputElement; const decrement = getAllByRole("button")[0]; if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("-1"); if (decrement) { - userEvent.click(decrement); + await user.click(decrement); } expect(number.value).toBe("-1.5"); }); - test("Increment and decrement the value with min, max and step using the arrows in keyboard", () => { + test("Increment and decrement the value with min, max and step using the arrows in keyboard", async () => { + const user = userEvent.setup(); const { getByLabelText } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "1"); + await user.type(number, "1"); fireEvent.keyDown(number, { keyCode: 38 }); expect(number.value).toBe("5"); fireEvent.keyDown(number, { keyCode: 38 }); @@ -498,10 +520,11 @@ describe("Number input component tests", () => { fireEvent.keyDown(number, { keyCode: 40 }); expect(number.value).toBe("10"); }); - test("Increment and decrement the value with min, max and step using the scroll wheel in mouse", () => { + test("Increment and decrement the value with min, max and step using the scroll wheel in mouse", async () => { + const user = userEvent.setup(); const { getByLabelText } = render(); const number = getByLabelText("Number input label") as HTMLInputElement; - userEvent.type(number, "1"); + await user.type(number, "1"); fireEvent.wheel(number, { deltaY: -100 }); expect(number.value).toBe("5"); fireEvent.wheel(number, { deltaY: -100 }); @@ -533,7 +556,8 @@ describe("Number input component tests", () => { const increment = getAllByRole("button")[1]; expect(increment?.getAttribute("aria-label")).toBe("Increment value"); }); - test("Number input submits correct values inside a form and actions don't trigger the submit event", () => { + test("Number input submits correct values inside a form and actions don't trigger the submit event", async () => { + const user = userEvent.setup(); const handlerOnSubmit = jest.fn((e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -550,15 +574,15 @@ describe("Number input component tests", () => { const more = getAllByRole("button")[1]; const submit = getByText("Submit"); if (more) { - userEvent.click(more); + await user.click(more); } expect(handlerOnSubmit).not.toHaveBeenCalled(); if (less) { - userEvent.click(less); + await user.click(less); } expect(handlerOnSubmit).not.toHaveBeenCalled(); if (submit) { - userEvent.click(submit); + await user.click(submit); } expect(handlerOnSubmit).toHaveBeenCalled(); }); From 297f9e50bfe24a0b29980349066a00f100f052e1 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 29 Sep 2026 12:05:07 +0200 Subject: [PATCH 2/4] fix radiogroup tests --- .../lib/src/radio-group/RadioGroup.test.tsx | 73 +++++++++++-------- 1 file changed, 43 insertions(+), 30 deletions(-) diff --git a/packages/lib/src/radio-group/RadioGroup.test.tsx b/packages/lib/src/radio-group/RadioGroup.test.tsx index d2a5b4f203..c4cf57b866 100644 --- a/packages/lib/src/radio-group/RadioGroup.test.tsx +++ b/packages/lib/src/radio-group/RadioGroup.test.tsx @@ -54,7 +54,8 @@ describe("Radio Group component tests", () => { expect(radioGroup.getAttribute("aria-orientation")).toBe("horizontal"); }); - test("Sends its value when submitted", () => { + test("Sends its value when submitted", async () => { + const user = userEvent.setup(); const handlerOnSubmit = jest.fn((e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -70,11 +71,11 @@ describe("Radio Group component tests", () => { const radioGroup = getByRole("radiogroup"); const submit = getByText("Submit"); const radio = getAllByRole("radio")[4]; - userEvent.click(radioGroup); + await user.click(radioGroup); if (radio) { - userEvent.click(radio); + await user.click(radio); } - userEvent.click(submit); + await user.click(submit); }); test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", () => { @@ -127,7 +128,8 @@ describe("Radio Group component tests", () => { expect(radios[2]?.tabIndex).toBe(-1); }); - test("Disabled radio group doesn't send its value when submitted", () => { + test("Disabled radio group doesn't send its value when submitted", async () => { + const user = userEvent.setup(); const handlerOnSubmit = jest.fn((e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -141,7 +143,7 @@ describe("Radio Group component tests", () => { ); const submit = getByText("Submit"); - userEvent.click(submit); + await user.click(submit); }); test("Error state renders with correct aria attributes", () => { @@ -155,7 +157,8 @@ describe("Radio Group component tests", () => { expect(errorMessage.getAttribute("aria-live")).toBe("assertive"); }); - test("Radio group with required constraint and 'undefined' as value, sends an error", () => { + test("Radio group with required constraint and 'undefined' as value, sends an error", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByRole, getAllByRole } = render( @@ -168,16 +171,17 @@ describe("Radio Group component tests", () => { expect(onBlur).toHaveBeenCalledWith({ error: "This field is required. Please, choose an option.", }); - userEvent.click(radioGroup); + await user.click(radioGroup); if (radio) { - userEvent.click(radio); + await user.click(radio); } expect(onChange).toHaveBeenCalledWith("1"); fireEvent.blur(radioGroup); expect(onBlur).toHaveBeenCalledWith({ value: "1" }); }); - test("Radio group with required constraint and empty string as value, sends an error", () => { + test("Radio group with required constraint and empty string as value, sends an error", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByRole, getAllByRole } = render( @@ -189,7 +193,7 @@ describe("Radio Group component tests", () => { fireEvent.blur(radioGroup); expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, choose an option." }); if (radio) { - userEvent.click(radio); + await user.click(radio); } expect(onChange).toHaveBeenCalledWith("1"); }); @@ -213,7 +217,8 @@ describe("Radio Group component tests", () => { expect(submitInput?.value).toBe("2"); }); - test("Optional radio group conditions: onBlur event doesn't send an error when no radio was checked, has correct aria attributes, custom label and its value is the empty string", () => { + test("Optional radio group conditions: onBlur event doesn't send an error when no radio was checked, has correct aria attributes, custom label and its value is the empty string", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByRole, getByText, container } = render( @@ -235,12 +240,13 @@ describe("Radio Group component tests", () => { expect(radioGroup.getAttribute("aria-invalid")).toBe("false"); const optionalLabel = getByText("No selection"); const submitInput = container.querySelector(`input[name="test"]`); - userEvent.click(optionalLabel); + await user.click(optionalLabel); expect(onChange).toHaveBeenCalledWith(""); expect(submitInput?.value).toBe(""); }); - test("Controlled radio group", () => { + test("Controlled radio group", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByRole, getAllByRole, container } = render( @@ -261,14 +267,15 @@ describe("Radio Group component tests", () => { expect(radios[1]?.tabIndex).toBe(0); expect(radios[1]?.getAttribute("aria-checked")).toBe("true"); if (radios[6]) { - userEvent.click(radios[6]); + await user.click(radios[6]); } expect(onChange).toHaveBeenCalledWith("7"); fireEvent.blur(radioGroup); expect(onBlur).toHaveBeenCalledWith({ value: "2" }); }); - test("Select an option by clicking on its label", () => { + test("Select an option by clicking on its label", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByText, getAllByRole, container } = render( { const checkedRadio = getAllByRole("radio")[8]; const submitInput = container.querySelector(`input[name="test"]`); expect(checkedRadio?.tabIndex).toBe(-1); - userEvent.click(radioLabel); + await user.click(radioLabel); expect(onChange).toHaveBeenCalledWith("9"); expect(checkedRadio?.getAttribute("aria-checked")).toBe("true"); expect(checkedRadio?.tabIndex).toBe(0); @@ -291,7 +298,8 @@ describe("Radio Group component tests", () => { expect(submitInput?.value).toBe("9"); }); - test("Select an option by clicking on its radio input", () => { + test("Select an option by clicking on its radio input", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getAllByRole, container } = render( { const submitInput = container.querySelector(`input[name="test"]`); expect(checkedRadio?.tabIndex).toBe(-1); if (checkedRadio) { - userEvent.click(checkedRadio); + await user.click(checkedRadio); } expect(onChange).toHaveBeenCalledWith("7"); expect(checkedRadio?.getAttribute("aria-checked")).toBe("true"); @@ -315,7 +323,8 @@ describe("Radio Group component tests", () => { expect(submitInput?.value).toBe("7"); }); - test("Select an option that is already checked does not call onChange event but gives the focus", () => { + test("Select an option that is already checked does not call onChange event but gives the focus", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getAllByRole } = render( { expect(checkedRadio?.tabIndex).toBe(0); expect(checkedRadio?.getAttribute("aria-checked")).toBe("true"); if (checkedRadio) { - userEvent.click(checkedRadio); + await user.click(checkedRadio); } expect(onChange).not.toHaveBeenCalled(); expect(document.activeElement).toEqual(checkedRadio); @@ -363,7 +372,8 @@ describe("Radio Group component tests", () => { expect(submitInput?.value).toBe("1"); }); - test("When the radio group gains the focus by keyboard ('tab' key), it goes to the first option (if no one was previously selected), without selecting it", () => { + test("When the radio group gains the focus by keyboard ('tab' key), it goes to the first option (if no one was previously selected), without selecting it", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByRole, getAllByRole, container } = render( @@ -380,7 +390,7 @@ describe("Radio Group component tests", () => { const radios = getAllByRole("radio"); const submitInput = container.querySelector(`input[name="test"]`); const checkedRadio = getAllByRole("radio")[0]; - userEvent.tab(); + await user.tab(); expect(onChange).not.toHaveBeenCalled(); expect(submitInput?.value).toBe(""); expect(checkedRadio?.tabIndex).toBe(0); @@ -476,7 +486,8 @@ describe("Radio Group component tests", () => { expect(submitInput?.value).toBe("9"); }); - test("Keyboard focus movement continues from the last radio input clicked", () => { + test("Keyboard focus movement continues from the last radio input clicked", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByRole, getAllByRole, container } = render( { const radios = getAllByRole("radio"); const submitInput = container.querySelector(`input[name="test"]`); if (radios[3]) { - userEvent.click(radios[3]); + await user.click(radios[3]); } fireEvent.keyDown(radioGroup, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 }); expect(onChange).toHaveBeenCalledWith("5"); @@ -500,7 +511,7 @@ describe("Radio Group component tests", () => { expect(radios[4]?.tabIndex).toBe(0); expect(submitInput?.value).toBe("5"); if (radios[8]) { - userEvent.click(radios[8]); + await user.click(radios[8]); } fireEvent.keyDown(radioGroup, { key: "ArrowLeft", code: "ArrowLeft", keyCode: 37, charCode: 37 }); expect(onChange).toHaveBeenCalledWith("8"); @@ -510,7 +521,8 @@ describe("Radio Group component tests", () => { expect(submitInput?.value).toBe("8"); }); - test("Read-only radio group lets the user move the focus, but neither click nor keyboard press changes the value", () => { + test("Read-only radio group lets the user move the focus, but neither click nor keyboard press changes the value", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByRole, getAllByRole, container } = render( { const radios = getAllByRole("radio"); const submitInput = container.querySelector(`input[name="test"]`); if (radios[5]) { - userEvent.click(radios[5]); + await user.click(radios[5]); } expect(onChange).not.toHaveBeenCalled(); expect(radios[5]?.getAttribute("aria-checked")).toBe("false"); @@ -541,7 +553,8 @@ describe("Radio Group component tests", () => { expect(submitInput?.value).toBe(""); }); - test("Read-only radio group sends its value on submit", () => { + test("Read-only radio group sends its value on submit", async () => { + const user = userEvent.setup(); const handlerOnSubmit = jest.fn((e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -555,6 +568,6 @@ describe("Radio Group component tests", () => { ); const submit = getByText("Submit"); - userEvent.click(submit); + await user.click(submit); }); }); From 0482d0d8b971cbc6dab3d0229dcf589bc1dda771 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 29 Sep 2026 12:07:35 +0200 Subject: [PATCH 3/4] fix textarea tests --- packages/lib/src/textarea/Textarea.test.tsx | 32 ++++++++++++--------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/packages/lib/src/textarea/Textarea.test.tsx b/packages/lib/src/textarea/Textarea.test.tsx index 71c320b3c5..2f79b521c5 100644 --- a/packages/lib/src/textarea/Textarea.test.tsx +++ b/packages/lib/src/textarea/Textarea.test.tsx @@ -70,23 +70,26 @@ describe("Textarea component tests", () => { expect(textarea.value).toBe("Example text"); }); - test("Disabled textarea can not be modified", () => { + test("Disabled textarea can not be modified", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByLabelText } = render(); const textarea = getByLabelText("Example label"); - userEvent.type(textarea, "Test"); + await user.type(textarea, "Test"); expect(onChange).not.toHaveBeenCalled(); }); - test("Read-only textarea does not trigger onChange function", () => { + test("Read-only textarea does not trigger onChange function", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByLabelText } = render(); const textarea = getByLabelText("Example label"); - userEvent.type(textarea, "Test"); + await user.type(textarea, "Test"); expect(onChange).not.toHaveBeenCalled(); }); - test("Read-only textarea sends its value on submit", () => { + test("Read-only textarea sends its value on submit", async () => { + const user = userEvent.setup(); const handlerOnSubmit = jest.fn((e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -100,7 +103,7 @@ describe("Textarea component tests", () => { ); const submit = getByText("Submit"); - userEvent.click(submit); + await user.click(submit); expect(handlerOnSubmit).toHaveBeenCalled(); }); @@ -124,7 +127,8 @@ describe("Textarea component tests", () => { expect(onBlur).toHaveBeenCalledWith({ value: "Test" }); }); - test("Not optional constraint (onChange)", () => { + test("Not optional constraint (onChange)", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByLabelText } = render( @@ -134,7 +138,7 @@ describe("Textarea component tests", () => { fireEvent.change(textarea, { target: { value: "Test" } }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith({ value: "Test" }); - userEvent.clear(textarea); + await user.clear(textarea); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith({ value: "", @@ -142,7 +146,8 @@ describe("Textarea component tests", () => { }); }); - test("Pattern constraint", () => { + test("Pattern constraint", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByLabelText } = render( @@ -168,7 +173,7 @@ describe("Textarea component tests", () => { value: "pattern test", error: "Please match the format requested.", }); - userEvent.clear(textarea); + await user.clear(textarea); fireEvent.change(textarea, { target: { value: "pattern4&" } }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith({ value: "pattern4&" }); @@ -177,7 +182,8 @@ describe("Textarea component tests", () => { expect(onBlur).toHaveBeenCalledWith({ value: "pattern4&" }); }); - test("Length constraint", () => { + test("Length constraint", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const onBlur = jest.fn(); const { getByLabelText } = render( @@ -204,7 +210,7 @@ describe("Textarea component tests", () => { value: "test", error: "The minimum length is 5.", }); - userEvent.clear(textarea); + await user.clear(textarea); fireEvent.change(textarea, { target: { value: "this is a longer value" } }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith({ @@ -217,7 +223,7 @@ describe("Textarea component tests", () => { value: "this is a longer value", error: "The maximum length is 10.", }); - userEvent.clear(textarea); + await user.clear(textarea); fireEvent.change(textarea, { target: { value: "length" } }); expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalledWith({ value: "length" }); From 7429d257f77a030fbd0183535f524d602c8345c0 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 29 Sep 2026 12:09:10 +0200 Subject: [PATCH 4/4] fix checkbox tests --- packages/lib/src/checkbox/Checkbox.test.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/lib/src/checkbox/Checkbox.test.tsx b/packages/lib/src/checkbox/Checkbox.test.tsx index a0d9ca6dfd..3e3467feeb 100644 --- a/packages/lib/src/checkbox/Checkbox.test.tsx +++ b/packages/lib/src/checkbox/Checkbox.test.tsx @@ -35,7 +35,8 @@ describe("Checkbox component tests", () => { fireEvent.click(checkbox); expect(onChange).not.toHaveBeenCalled(); }); - test("Read-only checkbox sends its value on submit", () => { + test("Read-only checkbox sends its value on submit", async () => { + const user = userEvent.setup(); const handlerOnSubmit = jest.fn((e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -49,14 +50,15 @@ describe("Checkbox component tests", () => { ); const submit = getByText("Submit"); - userEvent.click(submit); + await user.click(submit); expect(handlerOnSubmit).toHaveBeenCalled(); }); - test("Read-only checkbox doesn't change its value with Space key", () => { + test("Read-only checkbox doesn't change its value with Space key", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByRole } = render(); const checkbox = getByRole("checkbox"); - userEvent.tab(); + await user.tab(); expect(document.activeElement === checkbox).toBeTruthy(); fireEvent.keyDown(checkbox, { key: " ", @@ -102,7 +104,8 @@ describe("Checkbox component tests", () => { expect(checkbox.getAttribute("aria-checked")).toBe("true"); expect(submitInput?.checked).toBe(true); }); - test("Disable keyboard and mouse interactions", () => { + test("Disable keyboard and mouse interactions", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByRole, getByText, container } = render( @@ -115,14 +118,15 @@ describe("Checkbox component tests", () => { expect(input.getAttribute("aria-checked")).toBe("false"); expect(input.getAttribute("aria-disabled")).toBe("true"); expect(submitInput?.checked).toBe(false); - userEvent.tab(); + await user.tab(); expect(document.activeElement === input).toBeFalsy(); }); - test("Keyboard interactions", () => { + test("Keyboard interactions", async () => { + const user = userEvent.setup(); const onChange = jest.fn(); const { getByRole } = render(); const checkbox = getByRole("checkbox"); - userEvent.tab(); + await user.tab(); expect(document.activeElement === checkbox).toBeTruthy(); fireEvent.keyDown(checkbox, { key: " ",