玩笑快照道具

Question

我試圖做此組件的快照：

export default class LoginExternalApi extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    let store = this.props.store.getState(); 

    return (
     <View style={styles.container}> 
     {store.facebookToken ? null : <FacebookButtonConnect />} 
     {store.spotifyToken ? null : <SpotifyButtonConnect />} 
     </View> 
    ) 
    } 
} 

正如你所看到的，我已經得到了render()方法裏面store變量，它調用一個道具。

這是根據我的測試文件的玩笑LIBRAIRIE：

import 'react-native'; 
import React from 'react'; 
import LoginExternalApi from '../app/scenes/LoginExternalApi'; 

import renderer from 'react-test-renderer'; 

test('LoginExternalApi scene renders correctly',() => { 
    const tree = renderer.create(
    <LoginExternalApi /> 
).toJSON(); 

    expect(tree).toMatchSnapshot(); 
}); 

這裏是我的錯誤：TypeError: Cannot read property 'getState' of undefined

我的測試應該怎麼寫任何想法？我應該嘲笑我的商店&怎麼樣？

Answer 1

這實際上取決於您的商店如何通常作爲道具結束以及如何測試組件正確渲染。

例如，您可以嘲笑您的商店，然後爲每個提供商快照一個版本。

test('LoginExternalApi scene renders Spotify connect button',() => 
    let store = { 
    getState() { 
     return { spotifyToken: 'foo' } 
    } 
    }; 

    const tree = renderer.create(
    <LoginExternalApi store={store} /> 
).toJSON(); 

    expect(tree).toMatchSnapshot(); 
}); 

但是，它看起來像你使用的終極版，你可能會發現，作爲你的組件成長，他們需要與存儲API的其他部分的工作 - 調度動作，例如。此時，對真實商店進行測試可能會更容易，而不是嘲笑它。

react-redux API使得爲給定組件提供商店源代碼很簡單，而不必考慮將商店作爲道具傳遞給每個級別。

const tree = renderer.create(
    <Provider store={store}> 
    <LoginExternalApi /> 
    </Provider> 
).toJSON(); 

只要通過該connect功能的存儲區<LoginExternalApi />分量接口，那麼您可以在測試一個明確的商店包裹。