如何使用 Jest 监视在运行时设置的 es6 类方法答案

【问题标题】：How to spy on es6 class methods that are set at run time using Jest如何使用 Jest 监视在运行时设置的 es6 类方法
【发布时间】：2017-07-15 16:47:59
【问题描述】：

我有一个具有 handleChange 方法的 React 组件。这个方法大致如下：

handleChange({ target }) {
        const [file] = target.files
        const urlReader = new FileReader()
        urlReader.onload = (event) => {
            const canvas = this.canvas
            const image = new Image()
            image.onload = () => {
                draw(image, canvas)   
            }
            image.src = event.target.result
        }
        urlReader.readAsDataURL(file)
}

我的困境是我想监视在此设置的 onload 函数，但它们是在运行时设置的。

我花了一些时间来模拟 FileReader 和 Image，但我无法理解这一点。

如何使用 Jest 实现这一目标？

【问题讨论】：

标签： reactjs jestjs

【解决方案1】：

接受 FileReader 作为参数怎么样，这样你就可以在单元测试中创建自己的，监视它，然后像这样将它作为参数传递：

修改您的 handleChange 函数以接受 FileReader 作为参数，如果没有传递则自动创建：

handleChange({ target }, urlReader = new FileReader()) {
        const [file] = target.files
        urlReader.onload = (event) => {
            const canvas = this.canvas
            const image = new Image()
            image.onload = () => {
                draw(image, canvas)   
            }
            image.src = event.target.result
        }
        urlReader.readAsDataURL(file)
}

在单元测试中，你会有这样的东西（你可能需要改变一些语法）：

const urlReader = new FileReader()
const urlReaderSpy = jest.spyOn(urlReader, 'onLoad')

handleChange(event, urlReader)

【讨论】：