reactjs - Enzyme/Jest spy 未调用 onClick

Question

我正在尝试使用 Enzyme/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>
    );
  }
}

我的测试

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

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

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

  })
})

我的 HandleClick

_handleClick = e => {
    let parent = e.target.parentElement;
    if(e.target.id || (!isNaN(parent.id) && parent.id > 0) ) {
        this.props._getData(e.target.id || e.target.parentElement.id)
        this.setState({status:'ok'})
    }else{
        this.setState({status:'Use numbers between 2 and 9'},()=>{
            return alert(this.state.status)
        })

    }
}

测试输出

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

Answer 1

要测试您的事件处理程序是否被调用，您必须将事件处理程序替换为模拟函数。一种方法是扩展您的组件类:

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();

  })
})

Prop _handleClick 替换了 Keyboard._handleClick，因此当 onClick 在被点击的元素中触发时被调用。

或者，jest.spyOn

如果您需要让事件处理程序执行并测试调用它的内容，您可以使用jest.spyOn。我发现这种方法更复杂，但更灵活。

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();

  })
})

请注意，这在使用浅层渲染时会失败，因此您必须改用 enzyme.mount。