Jest

Question

ile rea-navigasyon kullanan test bileşeni Ben de Redux kullanan bir React Native uygulamasında çalışıyorum ve Jest ile test yazmak istiyorum. Tepki-navigasyon tarafından eklenen "navigasyon" prop ile alamıyorum.

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

Yükleme bileşeni DrawerNavigator bir ekran olarak eklenir:

İşte benim bileşenidir. Burada

Ve

testtir:

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

    }); 
}); 

Testi çalıştırdığınızda, aşağıdaki hatayı alıyorum:

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) 

navigasyon özelliği alay konusunda herhangi bir fikir?

Answer 1

sahne üzerinden doğrudan navigation geçmek deneyin:

İşe yaradı

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