检查另一个函数中的函数是否被 jest 和 enzyme 调用

Question

我有一个测试需要用笑话和酶检查在附加到按钮的另一个函数中调用的函数。我模拟了两个函数，但不知道如何将一个附加到另一个。

我的组件如下所示：

class MyComponent extends React.Component {
    handleButton () {
        console.warn('Clicked!')
        this.context.anotherFunction()
    }

    render () {
        return (
            <div>
                My Component
                <button class='my-button' onClick={handleButton}>My Button</button>
            </div>
        )
    }

}

我想检查单击按钮时是否调用了 onClick 和 this.context.anotherFunction。这是我当前的测试结果：

  test.only('should test MyComponent button', () => {
    const wrapper = shallow(<MyComponent {...props} />)
    const anotherFunction = jest.fn()
    wrapper.instance().context = { anotherFunction }

    wrapper.instance().handleButton = () => {
      jest.fn()
      // How to simulate a call to anotherFunction???
      // wrapper.instance().context.anotherFunction()
    }
    wrapper.find('.my-button').simulate('click')
    expect(wrapper.instance().showCancelModal).toHaveBeenCalled() // Passes
    expect(wrapper.instance().context.showModal).toHaveBeenCalled() // Fails
  })

如何在 handleButton 的模拟版本中模拟 anotherFunction 的调用？

Answer 1

你可能想要的是jest.spyOn()

这使您可以在不实际模拟函数的情况下监视对函数的调用。那么将能够做的是：

 test.only('should test MyComponent button', () => {
    const wrapper = shallow(<MyComponent {...props} />)
    const anotherFunction = jest.fn()
    wrapper.instance().context = { anotherFunction }

    const handleButton = jest.spyOn(wrapper.instance(), 'handleButton');

    wrapper.find('.my-button').simulate('click')
    // your tests:
    expect(handleButton).toHaveBeenCalled() // Passes
    // Instead of checking "wrapper.instance().context.anotherFunction"
    // you can directly check if anotherFunction was called
    expect(anotherFunction).toHaveBeenCalled() // Fails
  })

检查另一个函数中的函数是否被 jest 和 enzyme 调用

Check if function within another function is called with jest and enzyme

javascript

reactjs

jestjs

enzyme