如何使用Jest模拟/测试按键?

问题描述 投票:0回答:1

我正在尝试模拟/测试调用props.onClick的按键事件。我使用相似的测试代码成功模拟了onClick,但是按键不起作用。

当我通过按Enter键进行手动测试时,它应该可以正常工作,但是当我尝试为其编写测试时,它总是会失败,我不确定为什么。我在useEffect函数中放置了一个记录器,并在测试过程中调用了该记录器,但是它失败并给出一个错误,即从未调用onClickFnc

在我的按钮功能组件中,我绑定了一个事件侦听器:

button.js

  useEffect(() => {
    if (enterEnable) {
      window.addEventListener('keydown', onEnterPress);
      return () => window.removeEventListener('keydown', onEnterPress);
    }
  });

  const onEnterPress = e => {
    if (e.which == 13) {
      onClickSync(e);
    }
  };

  const onClickSync = e => {
    props.onClick(e);
  };

button.test.js

  it('check ButtonLoader enable enter to work', () => {

    const onClickFnc = jest.fn(); 
    const wrapper = shallow(<ButtonLoader {...props} enterEnable={true} onClick={onClickFnc}/>);
    wrapper.find('button').simulate('keypress', {key: 'Enter'})
    expect(onClickFnc).toBeCalled();
  });

错误:

    expect(jest.fn()).toBeCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

我如何成功测试呢?

reactjs jestjs enzyme use-effect
1个回答
0
投票

尝试此方法

wrapper.find('button').simulate('keydown', {which: 13})

据我所知,模拟不会根据参数创建事件对象。而是按原样传递对象。

© www.soinside.com 2019 - 2024. All rights reserved.