QWIK: How to test input fields?

[Przemoo16]

Hi, I'm trying to write unit tests for the Qwik app that uses modular-forms. However, I cannot simulate filling the input with some value. Is there any user guide on how to write unit tests for modular forms, or if not, can someone help me to make it work?

My current approach that doesn't work:

test(`[Form Component]: verifies input`, async () => {
  const { screen, render, userEvent } = await createDOM();
  const component = <Form/>;

  await render(component);

  await userEvent('#myInput', 'input', { target: { value: 'New Value' } });

  const myInput = screen.querySelector('#myInput') as HTMLInputElement;
  expect(myInput.value).toEqual('New Value');
});

Part of the component:

<Form>
    <Field name="myInput">
        {(field, props) => (
          <input id="myInput" {...props} type="text" value={field.value} />
        )}
    </Field>
    <button type="submit">Submit</button>
</Form>

[fabian-hiller]

I'm sorry. I can't help you with this at the moment because I don't have any experience with it yet. However, I plan to write tests for Modular Forms in January and February and will be able to help you then.

[Przemoo16]

I'm sorry. I can't help you with this at the moment because I don't have any experience with it yet. However, I plan to write tests for Modular Forms in January and February and will be able to help you then.

I'd be grateful, thanks. Meanwhile, I would also investigate it and put comments here if I figure it out.

[Przemoo16]

I was able to make the test work. The missing piece was that besides triggering the input event, I also had to change the value of the input directly, like this:

const myInput = screen.querySelector('#myInput') as HTMLInputElement;
myInput.value = 'New Value';
await userEvent(myInput, 'input', { target: { 'New Value' } });

[fabian-hiller]

Thank you for the tip!