Thành phần thử nghiệm sử dụng điều hướng phản ứng với Jest

Question

Tôi đang làm việc trên ứng dụng React Native cũng sử dụng Redux và tôi muốn viết các bài kiểm tra với Jest. Tôi không thể giả mạo "điều hướng" chống đỡ được thêm vào bởi điều hướng phản ứng.

Đây là thành phần của tôi:

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

Thành phần tải được thêm vào như một màn hình để một DrawerNavigator.

Và đây là bài kiểm tra:

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

    }); 
}); 

Khi tôi chạy thử nghiệm, tôi nhận được lỗi sau:

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) 

Bất kỳ ý tưởng về làm thế nào để thử tài sản chuyển hướng?

Answer 1

Cố gắng vượt qua navigation trực tiếp thông qua đạo cụ:

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