javascript - 似乎无法用 Jest 模拟点击事件

Question

我刚开始使用 Jest 进行测试，需要模拟单击事件。我已经能够使用 enzyme CSS选择器选择元素并触发事件，但测试仍然失败，说我还没有运行该函数。

Test: 


it('test',() => {
  const e = { target: {id:'X'} }
  const click = jest.fn();

  let wrapper = shallow(<GameBoard onClick={click}/>);
  let test = wrapper.find("#gameBoard").childAt(0)
  test.simulate('click',e)
  expect(click).toHaveBeenCalledTimes(1)

})

Component :

import React, {Component} from 'react'


class GameBoard extends Component {

  handleClick = (e) => {
  this.props.turn

    if (e.target.innerText === ''){
        this.props.addToTotalMoves()
        e.target.innerText = this.props.turn

        this.props.updateActiveBoardArray(e.target.id)

        this.props.changeTurn()
      }
    }
  render(){
    return (

        <div id ='gameBoard'>
          <div
          id = '0'
          className = 'boardTile'
          onClick = {this.handleClick}
          ></div>

Answer 1

查看GameBoard的handleClick的源代码，我们可以看到它没有调用this.props.onClick()。

相反，它调用

    this.props.updateActiveBoardArray(e.target.id)
    this.props.changeTurn()

因此，您必须在测试中传递这些 props 并检查它们是否被调用:

const e = { target: {id:'X'} }
const updateActiveBoardArray = jest.fn();
const changeTurn= jest.fn();

let wrapper = shallow(<GameBoard 
    updateActiveBoardArray={updateActiveBoardArray}
    changeTurn={changeTurn}
/>);
let test = wrapper.find("#gameBoard").childAt(0).simulate('click', e);
expect(updateActiveBoardArray).toHaveBeenCalledTimes(1);
expect(updateActiveBoardArray).toHaveBeenCalledWith('X');
expect(changeTurn).toHaveBeenCalledTimes(1);