如何模擬實際上與Redux動作創作者相關的道具？

Question

在集成測試中，我想測試一個連接的動作創建者被調用。

describe('SomeContainer',() => { 
    let subject, store, fancyActionCreator 

    beforeEach(() => { 
    store = createStore(combineReducers({ /* ... */ })) 
    fancyActionCreator = sinon.spy() 
    const props = { 
     fancyActionCreator 
    } 
    subject = (
     <Provider store={store}> 
     <SomeContainer {...props} /> 
     </Provider> 
    ) 
    }) 

    it('calls fancyActionCreator on mount',() => { 
    mount(subject) 
    expect(fancyActionCreator.callCount).to.equal(1) 
    }) 
} 

動作創建者在componentWillMount之內調用，並按預期在測試環境之外工作。

問題是原始動作創建者在測試中被調用並且沒有正確模擬。

我的感覺，那是因爲終極版的connect()方法是更換諜照：

connect(mapStateToProps, { fancyActionCreator })(SomeContainer) 

Answer 1

您安裝了儲存您的組件。如果您從掛載調用中獲取返回值，它會爲您提供反應元素的酶封裝。此包裝可用於派遣行動，打擊在店：

const enzymeWrapper = mount(subject) 
enzymeWrapper.node.store.dispatch({ type: "ACTION", data: "your fake data" }); 

但是，這是測試的更多的整合類型，因爲你使用的減壓器以及爲你的屬性終極版商店狀態的連接。

這是我唯一能夠測試Redux存儲狀態到組件屬性連接的測試。如果你以其他方式僞造屬性，你可能會覆蓋你的組件邏輯，但是你缺少連接屬性來存儲的部分。

我會建議將你的組件分解爲表示型和容器組件。演示不需要使用商店，因此只需傳遞不同的屬性即可錘鍊其邏輯。容器組件的關心是將商店連接到表示組件。因此，對於容器組件，您可以使用我描述的測試類型。

反應的留言：

的mount其實使用VS shallow的表象/未連接的部分是不是那個直線前進。有時候，您在演示組件上使用的子組件需要通過掛載進行呈現（例如，出於某種原因，react-select需要DOM）。

但通常是的，除非您意識到您需要mount :)，否則應努力使用shallow表示組件。