用玩笑來測試陣營組件的方法

我負責提供保存功能的子窗體組件方法的容器組件。我試圖用玩笑&酶（我想我需要酵素？）來測試子組件是否觸發從父組件傳遞的功能。這兩種方法看起來像這樣：用玩笑來測試陣營組件的方法

class Parent extends Component { 
 
    handleSave = (someData) => (
 
    /* do some ajax with someData */ 
 
) 
 
    render() { 
 
    return(
 
     <ChildComponent {...this.props} handleSave={this.handleSave} /> 
 
    ) 
 
    } 
 
} 
 

 
class ChildComponent extends Component { 
 
    render() { 
 
    <form onSubmit={this.props.handleSave}> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    } 
 
}

而且測試：

import React from 'react' 
 
import ParentContainer from '../src/ParentContainer' 
 

 
describe('<ParentContainer />',() => { 
 

 
    it('Should fire handle save when PatientScheduler form saves',() => { 
 
    const component = mount(<ParentContainer />) 
 
    component.handleSave = jest.fn() 
 
    component.find('[type="submit"]').simulate('click') 
 
    expect(component.handleSave).toHaveBeenCalled() 
 
    }) 
 

 
})

我得到的失敗消息是Expected mock function to have been called.

我覺得我是90％的路。這裏有什麼問題？謝謝。

來源

2016-12-09 Eric D. Fields

的問題是，模擬出真火點擊事件，但運行wrapper.prop('click')()。形成文檔：

常見的問題

目前，事件模擬淺渲染爲一個通常會在實際環境中預計不會傳播。作爲結果，你必須具有事件處理程序集合中的實際節點上調用.simulate()。

即使名稱暗示此模擬了實際事件，.simulate()實際上將根據您提供的事件定位組件的支架。例如，.simulate('click')將實際獲得onClick道具，並調用它。

所以，你可以運行component.find('form').simulate('submit')或component.find('form').prop('onSubmit')()

來源

2016-12-09 15:28:08

OK，這解決了問題，提交（謝謝），但我仍然不知道如何對我的handleSave方法正確間諜。 –

存在一定的缺陷在你測試主要是該行'component.handleSave = jest.fn（）'。你不應該測試你的內部行爲，而是測試外部的東西。在你的情況下，我假設你將使用一些導入的模塊來完成實際的請求。你必須嘲笑和監視這一點。 –

用玩笑來測試陣營組件的方法

回答

相關問題