如何監視在運行時使用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)