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:
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?
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.