如何單元測試React組件shouldComponentUpdate方法

Question

我有一個React組件實現了shouldComponentUpdate方法，我想單元測試它。理想情況下，我可以在單元測試中更改組件上的某個道具或狀態，並驗證它是重新渲染還是不渲染。如果有幫助，我正在使用enzyme。

Answer 1

我可能會直接調用shouldComponentUpdate。

喜歡的東西

const comp = shallow(<Comp {...props} />) 
const shouldUpdate = comp.instance().shouldComponentUpdate(nextProps, nextState) 
expect(shouldUpdate).toBe(true/false) 

試圖通過確定組件實際呈現的/沒有渲染測試可能是更多的麻煩比它的價值;我甚至不知道你會如何使用酶。你不能真正離開渲染輸出，因爲你可能不會從shouldComponentUpdate返回false，除非渲染輸出和以前一樣。因此，確定渲染是否發生不能單獨來自輸出。

雖然通過直接調用它進行測試似乎很好。只要您相信React將正確使用您的shouldComponentUpdate返回值（如果不存在更大的問題），它是安全的。

Answer 2

我認爲你應該不提供單元測試，這就是爲什麼你不需要酶進行單元測試。

您的案例的快速單元測試示例。

const classContext = { 
    props: {}, 
    state: {} 
}; 
const nextProps = {}; 
const nextState = {}; 

const shouldUpdate = yourComponent.prototype.shouldComponentUpdate.call(classContext, nextProps, nextState); 

expect(shouldUpdate).toBe(true/false)