我正在使用 React 测试库来测试使用 FluentUI 构建的组件。
这是链接：https://codesandbox.io/s/keen-borg-2tqmj?file=/src/App.spec.js https://codesandbox.io/s/keen-borg-2tqmj?file=/src/App.spec.js
该代码基本上是示例代码的粘贴片段Dialog来自 FluentUI 文档站点的组件。我正在测试的行为是：
- 用户打开对话框
- 用户在对话框外部单击
-
onDimiss组件的 prop 应该被触发。
当我手动使用它时它可以工作，但是似乎我无法使用测试库模拟组件外部的单击。
我尝试使用userEvent.click(document.body)如中提到的这个帖子 https://stackoverflow.com/questions/56978283/unit-testing-react-click-outside-component-using-jest-and-react-testing-library但没有运气
有谁知道如何进行测试？
它不起作用，因为对话框组件没有监听onClick事件于body，所以在这种情况下你需要做的是找到被点击的实际元素，观察dom你会发现覆盖层是一个div，上面有一些覆盖类。
<div
class="ms-Modal is-open ms-Dialog root-94"
role="document"
>
<div
aria-hidden="true"
class="ms-Overlay ms-Overlay--dark root-99"
/>
现在的问题是找到一种方法来选择它。不幸的是，您无法通过 RTL 中的 className 选择元素，因此您需要使用另一个选择器；在这种情况下，我们可以通过角色获取父元素，然后访问第一个子元素。
const onDismiss = jest.fn();
const { getByRole } = render(<App onDismiss={onDismiss} />);
UserEvent.click(screen.getByText("Open Dialog"));
const document = getByRole("document");
UserEvent.click(document.firstChild);
expect(onDismiss).toHaveBeenCalled();
https://codesandbox.io/s/hungry-joliot-tjcph?file=/src/App.spec.js https://codesandbox.io/s/hungry-joliot-tjcph?file=/src/App.spec.js
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
