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

Question

我做了一个小回购来证明我的问题：https://github.com/msawatzky75/user-event-input-test

我这里有几个不同的场景：

html 按钮
div 带有点击处理程序
具有被监视的数据绑定的复选框
每次输入时触发的输入

其中每一个都会触发由 msw 处理的提取请求。我还为运行这些测试设置了 2 个不同的 DOM 环境：jsdom 和 happy-dom.

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

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

Answer 1

这里的问题是如何呈现组件。更具体地说，它是如何附加到文档正文的。

原图如下：

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

attachTo 属性似乎行为不端，但通过这样做可以解决：

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

这使得本例中通过测试的次数从 4/8 增加到 7/8，只有 happy-dom 复选框测试失败。

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

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

javascript

testing

vuejs2

testing-library