Testkomponente, die react-navigation mit Jest verwendet

Question

Ich arbeite an einer React Native-Anwendung, die auch Redux verwenden und ich möchte Tests mit Jest schreiben. Ich bin nicht in der Lage, die "Navigations" -Stütze zu verspotten, die von react-navigation hinzugefügt wird.

Hier ist meine Komponente:

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

Der Laden Komponente als Bildschirm zu einem DrawerNavigator hinzugefügt wird.

Und hier ist der 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(); 

    }); 
}); 

Wenn ich den Test ausführen, bekomme ich folgende Fehlermeldung:

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) 

Irgendeine Idee, wie man die Navigationseigenschaft verspotten?

Answer 1

Versuchen navigation direkt über Requisiten weitergeben müssen:

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