使用React測試Jest函數的返回值

Question

如何測試此React代碼中「doSomethingFancy」函數的返回值？我試圖找到一個超級簡單的例子，並找不到任何東西。所以我想編寫一個測試，檢查數字2是否被返回。我知道它並沒有真正返回到任何東西，因爲我將其作爲示例編寫，因此我可以學習如何爲我的React應用程序編寫測試。任何幫助將不勝感激。

import React from 'react'; 

class FancyStuff extends React.Component { 
    render() { 
     return <div> 
      <h1> 
       Hello, {this.props.name} 
      </h1> 

      <button onClick={this.doSomethingFancy}> 
       Add 1 + 1! 
      </button> 
     </div>; 
    } 

    doSomethingFancy(e) { 
     e.preventDefault(); 
     let value = 1 + 1; 
     return value; 
    } 
}; 

export default FancyStuff; 

Answer 1

如果您需要在您的測試中訪問類方法，它將作爲包裝的實例方法返回的屬性提供。

const wrapper = shallow(<MyComponent />); 
expect(wrapper.instance().doSomethingFancy()).toEqual(true);