如何在react-testing-library中测试元素是否不可点击

Question

我有一个具有onClick处理程序的元素，可以通过将pointer-events: none添加到父元素来禁用它（父元素禁用子元素的点击）。 现在我想测试一下我的子元素是否不可点击，我该怎么做？ 使用userEvent.click会抛出错误：

Error: Unable to perform pointer interaction as the element has `pointer-events: none`:

但这正是我想要测试的...

- Code Spirit

Answer 1

你可以使用pointerEventsCheck选项的userEvent.click，它允许你控制指针事件检查的频率。

例如：

import { render, screen } from "@testing-library/react";
import userEvent, {
  PointerEventsCheckLevel,
} from "@testing-library/user-event";

test("child is not clickable when parent has pointer-events: none", () => {
  render(
    <div style={{ pointerEvents: "none" }}>
      <button onClick={() => console.log("clicked")}>Click me</button>
    </div>
  );
  const button = screen.getByRole("button", { name: /click me/i });

  userEvent.click(button, {
    pointerEventsCheck: PointerEventsCheckLevel.Never,
  });

  expect(console.log).not.toHaveBeenCalledWith("clicked");
});

- Pluto

Answer 2

你可以使用 expect().toThrow()，如此文档所述这里。

根据你的测试设置，你还可以传递一个模拟函数给你的 onClick，并断言它从未被调用。

test('onClick is not called', () => {
    const mockFn = jest.fn();
    render(
        <Foo onClick={mockFn} />
    );

    // Add logic to prevent click and fire the event.

    expect(mockFn).not.toBeCalled();
});

- Hammer

---

这个方法可能有效，但只会测试实施而不是行为。 - undefined