2

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

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

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

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

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

我尝试使用这篇文章userEvent.click(document.body)中提到的但没有运气

有谁知道如何使测试工作？

4

1 回答 1

2

它不起作用，因为 Dialog 组件没有侦听onClick.body上面有一些覆盖类。

        <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

于 2021-06-11T05:52:03.263 回答