Testowanie komponentu, który używa nawigacji z reagowaniem z Jest

Question

Pracuję nad aplikacją React Native, która również używa Redux i chcę napisać testy z Jest. Nie jestem w stanie sfałszować rekwizytu "nawigacyjnego" dodawanego przez nawigację reagowania.

Oto mój komponent:

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

Komponent Ładowanie jest dodawany jako ekran do DrawerNavigator.

A oto 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(); 

    }); 
}); 

Kiedy wykonać test, pojawia się następujący błąd:

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) 

Każdy pomysł, w jaki sposób mock właściwość nawigacji?

Answer 1

Spróbuj przejść navigation bezpośrednio za pomocą rekwizytów:

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