React - Jest - 测试 preventDefault Action

Posted 2023-02-22

【中文标题】React - Jest - 测试 preventDefault Action

【英文标题】：React - Jest - Test preventDefault Action

【发布时间】：2020-06-12 18:11:55

【问题描述】：

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

React 组件 - 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);
);

【问题讨论】：

测试失败前是否记录了TEST REACHED HERE？

您能否提供在您的App.js 组件中返回的JSX？

【参考方案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);
);

【讨论】：

感谢您的回答！我将使用这种技术来测试我的 Svelte 应用程序。

这不是检查 preventDefault 的显式方式。

【参考方案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 之外的其他东西！

【讨论】：

这应该是一个可以接受的答案。它更明确，对我来说效果很好

这个在测试 mouseDown 事件时对我不起作用

我的错，它工作正常（无法编辑以前的评论）。