如何使用 Jest 在 React/Typescript 中模拟事件对象？答案

【问题标题】：How to mock event object in React/Typescript with Jest?如何使用 Jest 在 React/Typescript 中模拟事件对象？
【发布时间】：2021-03-23 14:02:43
【问题描述】：

我想测试当用户通过交互式 HTMLElement 按下 Enter 键时是否调用了 console.log 函数。我一直在尝试使用 Typescript 在 Jest 中模拟函数的事件对象，但它不起作用。如何使用 Jest 在 React/Typescript 中模拟事件对象？

示例：

import React from 'react';

function handleKey(event: React.KeyboardEvent) {
  if (event.key === 'Enter') {
    console.log('The enter key has been clicked');
  }
}

【问题讨论】：

github.com/testing-library/user-event#keyboardtext-options?

标签： reactjs typescript jestjs

【解决方案1】：

如果处理程序是可公开使用的函数，则使用普通对象调用它（您可能需要进行类型断言）

console.log = jest.fn();
handleKey({ key: 'Enter' } as React.KeyboardEvent);
expect(console.log).toHaveBeenCalledWith('The enter key has been clicked');

如果您正在测试的处理程序位于组件内部，您可以通过触发触发处理程序的元素上的 keydown 或 keypress 来间接调用它。

如果您使用 React 测试库，请使用 fireEvent

const myInput = getByTestId(container, 'my-input')
fireEvent.keyPress(myInput, { key: 'Enter', keyCode: 13 })

如果您使用的是 Enzyme，请使用 simulate

wrapper.find('input').simulate('keypress', {key: 'Enter'})

如果 RTL 有按键问题，请参考https://github.com/testing-library/react-testing-library/issues/269

【讨论】：

感谢您的回答。不幸的是，就我而言，我必须模拟那个事件对象。我知道这是一种不好的做法，我不必使用它。也许这就是没有此类案例的原因。
确实！我找到你了。