@testing-library/React：在组件外部单击不起作用

Question

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

这里是链接： https://codesandbox.io/s/keen-borg-2tqmj?file=/src/App.spec.js

代码基本上是来自 FluentUI 文档站点的Dialog 组件示例代码的粘贴 sn-p。我正在测试的行为是：

1. 用户打开对话框
2. 用户在对话框外点击
3. onDimiss 组件的属性应该被触发。

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

我尝试使用this post 中提到的userEvent.click(document.body)，但没有成功

有人知道如何进行测试吗？

Answer 1

它不起作用，因为 Dialog 组件没有监听 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 中你不能通过它们的 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