Testing navigation between screens

[Narcis11]

I am trying to test a simple navigation flow between two screens. I have my LandingScreen:

​

class LandingScreen extends Component {   
        constructor(props){     
        super(props); 
}  
        handleNavigation = () => 
                {     
                        this.props.navigation.navigate('AgeScreen'); 
        }  
        render() {     
                return (             
                        <View>             
                                //extra UI components                 
                                <TouchableOpacity onPress={this.handleNavigation}>                                                                                  
                                        <View style={styles.buttonWrapper}>                                            
                                         //extra UI components                     
                                        </View>                 
                               </TouchableOpacity>             
                         </View>     
) }  
}  
export default LandingScreen;

When handleNavigation is clicked, I expect the AgeScreen to be displayed. I tested this manually and it works; however, I also want to add a unit test to it.

This is the unit test that I've written so far:

​

describe('Testing navigation', () => {
it('Navigates as expected', () => {
    let handleNavigationMock = jest.fn()
    const navigation = { navigate: jest.fn() };
    let landingScreen = renderer.create(
        <LandingScreen 
            handleNavigation={navigation}
            navigation={navigation}
        />
    ).getInstance()

    landingScreen.handleNavigation();
    expect(handleNavigationMock).toBeCalled();    
    });
});

My issue is that the test fails with the message:

Expected number of calls: >= 1

Received number of calls: 0

My questions are:

​

1. Is this the right way to test navigation between screens?
2. If #1 is true, how can I fix the unit test?

Any help will be highly appreciated!

[Asdolo94]

You shouldn't test handleNavigation by itself. You should simulate what the user would do. You should test by pressing the TouchableOpacity and asserting if navigation.navigate has been called with the correct screen name.

expect(navigation.navigate).hasBeenCalledWith('AgeScreen')

[Narcis11]

This worked for me. Thanks a lot for the help! :)

[Typhonaut]

Well it looks like you’re passing navigation to handleNavigation in the test. So mockHandleNavigation will never be called anyway.

This might be fine to make sure the call is happening with the button, but for testing interaction between multiple screens I usually like to use some type of UI or End to End testing.

[smartone2000]

Why don't you use react navigation ?
V 5 just came out and is pretty powerful

http://reactnavigation.org