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

Question

我想测试当用户通过交互式 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');
  }
}

Answer 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 })

如果您使用酶，请使用模拟

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

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