为什么 @testing-library/user-event 不能与输入元素交互？

Question

我做了一个小仓库来演示我的问题： https://github.com/ msawatzky75/user-event-input-test

我在这里有一些不同的场景：

1. 复选框的html 按钮
2. 带有点击处理程序
3. div 以及带有数据绑定的数据绑定，该
4. 输入会在每次输入

每个触发器 时触发由 msw 处理的获取请求。我还设置了 2 个不同的 DOM 环境来运行这些测试：jsdom 和 happy-dom。

只有与输入元素（复选框和文本输入）交互的测试会失败，并且结果在 DOM 环境中保持一致。

这里有什么问题呢？这是 @testing-library/user-event 的错误吗？如果没有，如何解决这个问题？

Answer 1

这里的问题是如何渲染组件。更具体地说，如何将其连接到文档主体上。

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 Happy-Dom复选框测试失败。