Test du composant qui utilise la navigation de réaction avec Jest

Question

Je travaille sur une application React Native qui utilise également Redux et je veux écrire des tests avec Jest. Je ne suis pas capable de se moquer de l'accessoire "navigation" ajouté par reac-navigation.

Voici mon composant:

import React from 'react'; 
import { connect } from 'react-redux'; 
import PropTypes from 'prop-types'; 
import { Text, View } from 'react-native'; 

const Loading = (props) => { 
    if (props.rehydrated === true) { 
    const { navigate } = props.navigation; 
    navigate('Main'); 
    } 
    return (
    <View> 
     <Text>Loading...</Text> 
    </View> 
); 
}; 

Loading.propTypes = { 
    rehydrated: PropTypes.bool.isRequired, 
    navigation: PropTypes.shape({ 
    navigate: PropTypes.func.isRequired, 
    }).isRequired, 
}; 

const mapStateToProps = state => ({ 
    rehydrated: state.rehydrated, 
}); 

export default connect(mapStateToProps)(Loading); 

Le composant de chargement est ajouté comme un écran à un DrawerNavigator.

Et voici le test:

import React from 'react'; 
import renderer from 'react-test-renderer'; 
import mockStore from 'redux-mock-store'; 

import Loading from '../'; 

describe('Loading screen',() => { 

    it('should display loading text if not rehydrated',() => { 
    const store = mockStore({ 
     rehydrated: false, 
     navigation: { navigate: jest.fn() }, 
    }); 

    expect(renderer.create(<Loading store={store} />)).toMatchSnapshot(); 

    }); 
}); 

Quand je lance le test, je reçois l'erreur suivante:

Warning: Failed prop type: The prop `navigation` is marked as required in `Loading`, but its value is `undefined`. 
      in Loading (created by Connect(Loading)) 
      in Connect(Loading) 

Toute idée sur la façon de se moquer de la propriété de navigation?

Answer 1

Essayez de passer navigation directement via des accessoires:

it('should display loading text if not rehydrated',() => { 
    const store = mockStore({ 
    rehydrated: false, 
    }); 
    const navigation = { navigate: jest.fn() }; 

    expect(renderer.create(<Loading store={store} navigation={navigation} />)).toMatchSnapshot(); 
});