如何正確地單元測試一個React組件？

Question

當我測試反應組分時，最佳實踐是什麼以及我應該測試什麼樣的東西？在正常測試中，我通常只是測試正確的狀態+輸入是否導致正確的狀態+輸出

但是React組件有點不同。他們有狀態+道具+用戶輸入，導致狀態+標記。

這可能會導致許多不同的潛在情景。我是否需要測試所有這些場景的結果狀態？ 標記可能很大。我應該測試整個標記樹是否如預期的那樣？或者只是其中的一部分？我如何確定要測試的標記的哪一部分？

Answer 1

第一個明顯的事情要記住：

• 如果您的組件的邏輯可以封裝成模塊，並獨立測試，然後再去做。示例：對於計算器組件，可以獨立於組件測試計算本身。我知道這很明顯，但只是爲了說明問題。
• 將組件拆分爲更小的組件並分別測試每個組件。

關於組成部分，始終測試：

• 如果正確的道具將呈現正確的輸出（HTML）。
• 如果正確的用戶交互（點擊，按鍵......）將觸發適當的事件並導致正確的輸出（HTML）。在單元測試中，我通常不會處理組件狀態，因爲我認爲這不是一個好的做法。要測試電視機，您不必打開它。

如果您不確定使用什麼庫來測試React組件，我強烈建議Enzyme。從他們的GitHub頁面

例子：

describe('<MyComponent />',() => { 
    it('renders three <Foo /> components',() => { 
    const wrapper = shallow(<MyComponent />); 
    expect(wrapper.find(Foo)).to.have.length(3); 
    }); 

    it('renders an `.icon-star`',() => { 
    const wrapper = shallow(<MyComponent />); 
    expect(wrapper.find('.icon-star')).to.have.length(1); 
    }); 

    it('renders children when passed in',() => { 
    const wrapper = shallow(
     <MyComponent> 
     <div className="unique" /> 
     </MyComponent> 
    ); 
    expect(wrapper.contains(<div className="unique" />)).to.equal(true); 
    }); 

    it('simulates click events',() => { 
    const onButtonClick = sinon.spy(); 
    const wrapper = shallow(
     <Foo onButtonClick={onButtonClick} /> 
    ); 
    wrapper.find('button').simulate('click'); 
    expect(onButtonClick).to.have.property('callCount', 1); 
    }); 
});