与 jest/RTL 测试中常规文档查询选择器找到的页面元素交互

Question

我希望能够打开一个菜单，该菜单会在您单击汉堡包元素时打开。此元素由外部库设置。 RTL 查询函数无法访问它，因为它没有任何可匹配的属性（没有文本、标签文本、角色、标题等）。

我可以用 document.querySelector 检索它，但是那个函数 returns 是一个元素，我需要能够在它上面触发一个点击事件，这需要元素是 [=21] =] 目标元素。有没有办法检索该类型的元素，或者以其他方式转换它？我试过了

const MenuButton = document.querySelector("external-lib-classname") as TargetElement;
fireEvent.click(MenuButton);

但这似乎不适用于 fireEvent，因为它无法将元素识别为 DOM 元素。

这似乎是对 RTL 的一些疏忽，除非我遗漏了什么。

Answer 1

您可以对 RTL 的 render 方法返回的 container 使用手动查询。

const { container } = render(<Component />);
const menuButton = container.querySelector("external-lib-classname");
fireEvent.click(menuButton);

请注意，使用 querySelector 通过 class/id 查询是 not recommended by RTL 并且只能作为最后的手段，当其他一切都失败时。

Interact with page element found by regular document query selector in jest/RTL test