userEvent.selectOptions actually selects the value i set but its not firing the event listener that updates a hook
this is the component
onChangeSelectHandler = (e: React.ChangeEvent<HTMLSelectElement>): void => {
setSinger({
...singer,
voiceType: VoiceType[Number(e.currentTarget.value)],
});
},
VoiceTypeList = () => (
<select
ref={selectRef}
onChange={onChangeSelectHandler}
value={VoiceType[singer.voiceType as keyof typeof VoiceType]}
>
{Object.keys(VoiceType).map((element, id) => {
if (isNaN(Number(element))) {
return (
<option
key={id}
value={VoiceType[element as keyof typeof VoiceType]}
>
{element}
</option>
);
}
})}
</select>
);
Here the test
test("Add singer to the list when form is filled", async () => {
const { result } = renderHook(
() => useSelector((state: RootState) => state.crud),
{
wrapper: ({ children }) => (
<Provider store={store}>{children}</Provider>
),
}
),
singerNameInput = screen.getByPlaceholderText("Singer name"),
singerBandInput = screen.getByPlaceholderText("Singer band"),
singerVoiceTypeSelect = screen.getByRole("combobox") as HTMLOptionElement,
addSingerBtn = screen.getByText("Add");
await userEvent.type(singerNameInput, "Hansel");
await userEvent.type(singerBandInput, "Hansel");
await userEvent.selectOptions(singerVoiceTypeSelect, "2");
fireEvent(
addSingerBtn,
new MouseEvent("click", {
bubbles: true,
cancelable: true,
})
);
expect(singerVoiceTypeSelect.querySelectorAll("option")[2].selected).toBe(
true
);
expect(result.current[0].name).toBe("Hansel");
expect(result.current[0].band).toBe("Hansel");
expect("Baritone").toBe(VoiceType[2]);
expect(result.current[0].voiceType).toBe(VoiceType[2]);});
As you can see the test doesnt fails when I assure that element with value of “2” is selected. Its actually select but the hook doesnt update when I submit.