TypeError: Cannot read property 'navigate' of undefined

Question

I wrote a snapshot test for a screen called NewUser.js, here is the test code:

import React from "react";
import NewUser from "../app/screens/NewUser/NewUser"
import renderer from "react-test-renderer"

describe("<NewUser/>", ()=>{
  it("snapshot", ()=>{
    expect(renderer.create(<NewUser/>).toJSON()).toMatchSnapshot();
  });
});

And here is the NewUser.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';

import styles from './Styles'

export default class NewUser extends Component {
   static navigationOptions = () => {
    return {
        headerStyle: styles.headerStyle,
        headerTintColor: '#fff',
        headerTitle: 'JetSet',
        headerTitleStyle: {
            flex: 1,
        }
    };
};

render() {

    const { navigate } = this.props.navigation;

    return (
        <View style={styles.background}>
            <View style={styles.container}>
                <Button
                    onPress={() => navigate('Survey', { survey: 'NewUserQuestions' })}
                    title="New User"
                />
            </View>
        </View>
    );
}
}

I got the error when I run the test. What should I do to make test runnable? Thanks.

Look at https://stackoverflow.com/questions/52569447/how-to-mock-react-navigations-navigation-prop-for-unit-tests-with-typescript-in — Oleg, Oct 07 '19 at 05:36
Do you see the title `JetSet` on the screen after it renders? — Abdeen, Oct 08 '19 at 10:27

score 0 · Answer 1 · edited Oct 09 '19 at 15:21

0

I somehow solved it by doing this

{ navigation } = this.props
...navigation.navigate()

I am still not sure the reason caused that issue, and the solution is not perfect, but it saved my code.

edited Oct 09 '19 at 15:21

Machavity

30,841
27
92
100

answered Oct 09 '19 at 15:20

DarkVoidZeratu

35
6

score 0 · Answer 2 · answered Mar 02 '23 at 13:40

0

Add mock function for navigate like const navigate = jest.fn(); "YourComponent navigation={{navigate}} "

pass navigation props in your component like

answered Mar 02 '23 at 13:40

Rohit Bansal

69
2

TypeError: Cannot read property 'navigate' of undefined

2 Answers2