Reactjs 酶/玩笑间谍不叫onClick

我正在尝试用Ezyme/Jest测试react组件的事件处理程序，但是我的spy函数从未被调用

我的组件有一个id为的div，我用它来查找dom元素

 render() {
    return (
        <div>
            <Top
                {...this.props}
            />
            <div 
                id = 'keyboard_clickable'
                onClick = {this._handleClick}
                style= {styles.main}>
                {this._showKeyBoard()}
            </div>
            <input onChange = {() => {}}/>
      </div>
    );
  }
}

测试输出

Expected mock function to have been called, but it was not called.

---

要测试是否调用了事件处理程序，必须用模拟函数替换事件处理程序。一种方法是扩展组件类：

class TestKeyboard extends Keyboard {
  constructor(props) {
    super(props)
    this._handleClick = this.props._handleClick
  }
}

describe('onclick function is called ...', () => {
  it.only('spyOn', () => {
    const spy = jest.fn()

    const wrapper = shallow(
      <TestKeyboard 
      _getData      = { () => {} }
      _erase        = { () => {} }
      _get_letters  = { () => {} }
      _createWord   = { () => {} }
      _modeSwitch   = { () => {} }
      _handleClick  = { spy      }
      />
    )

    wrapper.find('#keyboard_clickable').simulate('click', {
      target:{
        parentElement:{ id: 5 },
        id:6
        }
    })
    expect(spy).toHaveBeenCalled();

  })
})

---

请注意，在使用浅层渲染时，此操作将失败，因此您必须使用enzyme.mount来代替。

似乎在浅层渲染中使用enzyme模拟单击确实有效，但仅当我使用forceUpdate（）时，如在Jemi的解决方案中

例如：

 beforeEach(() => {
    wrapper = shallow(<VehicleDamage handleSubmit={mockFunction} onPrevClick={mockFunction} />);
});

it('handlePrevClick is called on click', function() {
    const spyHandlePrevClick = jest.spyOn(wrapper.instance(), 'handlePrevClick');
    wrapper.instance().forceUpdate(); // I assume required to assign mocked function

    let buttonContainer = wrapper.find('ButtonContainer').dive();
    let button = buttonContainer.find('Button').at(0);

    button.simulate('click', {
        preventDefault: () => jest.fn()
    });

    expect(spyHandlePrevClick).toHaveBeenCalled();
});

beforeach（（）=>{
包装器=浅（）；
});
它（'单击时调用handlePrevClick'，函数（）{
const spyHandlePrevClick=jest.spyOn（wrapper.instance（），'handlePrevClick'）；
wrapper.instance（）.forceUpdate（）；//我假设分配模拟函数需要
让buttonContainer=wrapper.find（'buttonContainer'）.dive（）；
let button=buttonContainer.find（'button'）。位于（0）；
按钮。模拟（'单击'{
preventDefault:（）=>jest.fn（）
});
expect（spyHandlePrevClick）.toHaveBeenCalled（）；
});

您能展示一下键盘是什么吗？我怀疑它可能没有调用Keyboard.props.onClick.Yeah没有调用Keyboard.props.\u handleClick，方法是Keyboard.\u handleClick请将其添加到您的原始帖子中，这里几乎看不懂您的\u handleClick方法从未调用onClick props。您可以测试的是，状态已正确更改，_getdataprops被调用为确实通过测试的hanks！我缺少wrapper.instance（）.forceUpdate（），谢谢

class TestKeyboard extends Keyboard {
  constructor(props) {
    super(props)
    this._handleClick = this.props._handleClick
  }
}

describe('onclick function is called ...', () => {
  it.only('spyOn', () => {
    const spy = jest.fn()

    const wrapper = shallow(
      <TestKeyboard 
      _getData      = { () => {} }
      _erase        = { () => {} }
      _get_letters  = { () => {} }
      _createWord   = { () => {} }
      _modeSwitch   = { () => {} }
      _handleClick  = { spy      }
      />
    )

    wrapper.find('#keyboard_clickable').simulate('click', {
      target:{
        parentElement:{ id: 5 },
        id:6
        }
    })
    expect(spy).toHaveBeenCalled();

  })
})

import { mount } from 'enzyme'

describe('onclick function is called ...', () => {
  it.only('spyOn', () => {
    const wrapper = mount(
      <Keyboard 
      _getData      = { () => {} }
      _erase        = { () => {} }
      _get_letters  = { () => {} }
      _createWord   = { () => {} }
      _modeSwitch   = { () => {} }
      />
    )

    const spy = jest.spyOn(wrapper.instance(), '_handleClick')
    wrapper.instance().forceUpdate()

    wrapper.find('#keyboard_clickable').simulate('click', {
      target:{
        parentElement:{ id: 5 },
        id:6
        }
    })
    expect(spy).toHaveBeenCalled();

  })
})

 beforeEach(() => {
    wrapper = shallow(<VehicleDamage handleSubmit={mockFunction} onPrevClick={mockFunction} />);
});

it('handlePrevClick is called on click', function() {
    const spyHandlePrevClick = jest.spyOn(wrapper.instance(), 'handlePrevClick');
    wrapper.instance().forceUpdate(); // I assume required to assign mocked function

    let buttonContainer = wrapper.find('ButtonContainer').dive();
    let button = buttonContainer.find('Button').at(0);

    button.simulate('click', {
        preventDefault: () => jest.fn()
    });

    expect(spyHandlePrevClick).toHaveBeenCalled();
});