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

Question

我有一个具有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？

Answer 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)