Reactjs @测试库/反应：在组件外部单击不工作

我正在使用react测试库测试用FluentUI构建的组件

以下是链接：

该代码基本上是fluentuidocs站点中

Dialog

组件示例代码的粘贴片段。我正在测试的行为是：

用户打开对话框

用户在对话框外单击

onDimiss

应该触发组件的道具

当我手动使用它时，它可以工作，但是我似乎无法通过测试库模拟组件外部的单击

我尝试使用

userEvent.click（document.body）

，如中所述，但没有成功

---

有人知道如何使测试工作吗？

它不工作，因为对话框组件没有侦听

正文

上的

onClick

事件，所以在这种情况下，您需要做的是找到正在单击的实际元素，观察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中的元素，因此需要使用另一个选择器；在这种情况下，我们可以通过角色获取父元素，然后访问第一个子元素

    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();

const onDismiss=jest.fn（）；
常量{getByRole}=render（
此帖子
链接有相同的codesandbox url谢谢提醒。修复了链接没有问题，让我知道我的答案是否适合你谢谢解释。只是好奇你发布的codesandbox url中的测试成功了吗？我直接在codesandbox中运行了你修改过的测试版本，但它仍然给了我相同的结果result@ShiCheng抱歉，我忘了我无意中更改了应用程序组件代码并保存了它，您可以再次检查，现在它通过了。我看到它通过了，为什么它现在通过了。非常感谢！