反应-开玩笑-测试preventDefault操作

Question

我不知道如何测试按键事件和防止默认事件。测试已达到代码，但从未调用过preventDefault：Received number of calls: 0

反应组件- App.js

  const onKeyDown = e => {
      console.log("==== TEST REACHED HERE ====")
      e.preventDefault(); // NEVER CALLED ???
  };
  useEffect(() => {
    document.addEventListener("keydown", onKeyDown, false);
    return () =>
      document.removeEventListener("keydown", onKeyDown, false);
  }, []);

单元测试

it("should prevent default action on key down", () => {
   const { getByRole } = render(<App {...props} />);
   const grid = getByRole("app");
   const mockEvent = { preventDefault: jest.fn() };
   fireEvent.keyDown(grid, mockEvent);
   expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
});

Answer 1

似乎您具有反应测试库can not mock preventDefault的事件属性。

在钩子之下，fireEvent正在调用dispatchEvent，因此您可以利用以下事实：如果事件被取消，则调用event.preventDefault将返回false：

it("should prevent default action on key down", () => {
   const { getByRole } = render(<App {...props} />);
   const grid = getByRole("app");
   const isPrevented = fireEvent.keyDown(grid);
   expect(isPrevented).toBe(false);
});

Answer 2

我找到了比公认答案更明确的方法。您可以使用来自“react-testing-library”的 createEvent 在触发之前手动创建事件。

it("should prevent default action on key down", () => {
  const { getByRole } = render(<App {...props} />);
  const grid = getByRole("app");
  const keyDownEvent = createEvent.keyDown(grid);
   
  fireEvent(grid, keyDownEvent);
   
  expect(keyDownEvent.defaultPrevented).toBe(true);
});

我认为这个方法可以重用于测试除 defaultPrevented 之外的其他东西！