Why can't @testing-library/user-event interact with input elements?

Question

i've made a small repo to demontstrate my issue: https://github.com/msawatzky75/user-event-input-test

i have a few different scenarios here:

1. html button
2. div with click handler
3. checkbox with data-binding that is watched
4. input that triggers every time its typed into

each of these triggers a fetch request that is handled by msw . i have also setup 2 different DOM environments to run these tests in: jsdom and happy-dom .

only the tests that interact with input elements (checkbox and the text input) fail and the results are consistant across DOM environments.

What is the issue here? is it a bug with @testing-library/user-event ? if not, how could one go about fixing this?

Answer 1

The issue here is how the component is rendered. More specifically, how it is attached to the document body.

the original render is as follows:

const root = document.createElement("div");
const { queryByText, getByTestId, debug } = render(BaseApp, {
    container: root,
    attachTo: document.body,
});

the attachTo property seems to misbehave, but is resovled by doing this instead:

const root = document.createElement("div");
document.body.appendChild(root);
const { queryByText, getByTestId } = render(BaseApp, {
    container: root,
});

this brings the number of passing tests in this example from 4/8 to 7/8, with only the happy-dom checkbox test failing.