如何使用Redux connect中的操作快照測試組件？

我想快照測試一個反應組件，它在componentDidMount()處理程序中分派一個redux動作。該操作通過Redux的connect()提供給組件。如何使用Redux connect中的操作快照測試組件？

我該如何嘲笑這個動作？

現在的動作是在組件的進口（見下文Newsfeed.js）。那麼，如何將我的測試中的模擬動作換掉？

我使用的終極版，形實轉換爲我的異步操作，但應該沒有多大關係。

應用程序/組件/ Newsfeed.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

// An action that makes an async request to get data 
import { loadNewsfeedStories } from '../actions/Newsfeed'; 

class Newsfeed extends Component { 
    componentDidMount(){ 
    this.props.loadNewsfeedStories(); 
    } 

    ... 
} 

export default connect(state => ({ 
    stories: state.newsfeed.stories 
}), 
{ 
    loadNewsfeedStories 
})(Newsfeed)

應用程序/測試/ Newsfeed.test.js

import React from 'react'; 
import { Provider } from 'react-redux'; 

// This creates a mockStore using my reducers and a saved JSON state. 
import { mockStore } from './MockState'; 

// The component to test 
import Newsfeed from '../components/Newsfeed'; 

test('Newsfeed matches snapshot',() => { 
    const wrapper = mount(
    <Provider store={mockStore}> 
     <Newsfeed /> 
    </Provider> 
); 

    expect(wrapper).toMatchSnapshot(); 
});

可能的解決方案

導出未連接的組件，並手動傳遞所有道具&模擬操作。與僅使用mockStore &提供者相比，將會有很多額外的編碼。我們也不會測試'連接'組件。
使用類似Nock？似乎攔截HTTP調用，所以Ajax請求實際上不會去任何地方。
對於愛可信，有一個lib稱爲moxios - https://github.com/mzabriskie/moxios

來源

2017-05-05 Don P

你可以嘗試導出不同的連接成分，但有嘲諷「mapDispatchToProps」功能。這樣，沒有行動會通過。

但是，親自測試組件時。我寫了一個模擬reducer，它們不應該改變狀態，但記錄所有調度的動作（Jests模擬函數對此非常有用）。這樣一來，你也可以測試是否點擊一個按鈕時，正確的動作布控，...

來源

2017-05-05 10:04:34

這是一個壞主意，同時測試組件，終極版存儲和模擬HTTP請求，因爲單元測試應該是小。

另一種選擇是，以避免componentDidMount執行業務邏輯。
而是寫

componentDidMount(){ this.props.loadNewsfeedStories(); }

您可以將此邏輯轉移到了Redux模塊（取決於你使用的庫）。如果只使用沒有像saga或redux-logic這樣的庫的redux-thunk，則可以使用此https://github.com/Rezonans/redux-async-connect。

但記錄所有派遣行動

終極版的thunk是很難測試。您的模擬調度程序將只接收一組函數。而且您無法驗證功能是由loadNewsfeedStories()還是由someAnotherThunk()創建的。

來源

2017-05-28 09:52:10 sky

如何使用Redux connect中的操作快照測試組件？

回答

相關問題