instantané Jest avec des accessoires

Question

je suis en train de faire un instantané de ce composant:

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> 
    ) 
    } 
} 

Comme vous pouvez le voir, j'ai une variable store dans la méthode render(), qui appellent un des accessoires.

Voici mon fichier de test basé sur Jest 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(); 
}); 

Et voici mon erreur: TypeError: Cannot read property 'getState' of undefined

Toute idée de la façon dont mon test doit être écrit? Devrais-je me moquer de mon magasin & comment?

Answer 1

Cela dépend vraiment de la façon dont votre magasin se termine normalement comme un accessoire et comment vous voulez tester que votre composant rend correctement. Par exemple, vous pouvez simuler votre magasin, puis prendre une photo pour chacun de vos fournisseurs.

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

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

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

Cependant, il semble que vous utilisez Redux et vous trouverez peut-être que vos composants grandissent, ils ont besoin de travailler avec d'autres parties de l'API de - actions dispatching, par exemple. À ce stade, il peut être plus facile de tester contre un vrai magasin, plutôt que de se moquer de lui.

L'API react-redux rend trivial l'approvisionnement de votre magasin pour un composant donné, plutôt que de penser à faire passer le magasin comme accessoire à tous les niveaux.

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

Tant que vos <LoginExternalApi /> interfaces composant avec le magasin grâce à la fonction connect, alors vous pouvez l'envelopper dans un magasin explicite pour les tests.