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

Question

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

示例：

import React from 'react';

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

- Eugene Zhylin

---

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

Answer 1

如果处理程序是一个可以公开使用的函数，那么请使用一个普通对象来调用它（你可能需要进行类型断言）。

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

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

如果使用React Testing库，请使用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

- brietsparks

---

我想感谢您的回答。不幸的是，在我的情况下，我必须模拟那个事件对象。我知道这是一种不好的做法，我不应该使用它。也许这就是为什么没有这样的案例的原因。 - Eugene Zhylin

确实！我明白你的意思。 - Eugene Zhylin