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

Question

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

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

该代码基本上是 FluentUI 文档站点的 Dialog 组件示例代码的粘贴片段。我正在测试的行为是：

用户打开对话框
用户在对话框外点击
onDimiss 应该触发组件的 prop。

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

我尝试使用中提到的 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"
          />

现在的问题是想办法select。不幸的是，您不能通过类名在 RTL 中 select 元素，因此您需要使用另一个 select 或；在这种情况下，我们可以通过角色获取父元素，然后访问第一个子元素。

    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

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

@testing-library/React : Clicking outside of component not working

unit-testing

dialog

reactjs

react-testing-library

testing-library