TypeError: Cannot read property 'getParam' of undefined. for react native unit test using jest and enzyme?

Question

I am trying to write unit test cases for react native for very first time..I am getting following error

AlbumDetailView.js

import { View, Image } from 'react-native';
import { Button, Provider, Text } from 'react-native-paper';
import React from 'react';
import styles from '../style/AlbumDetailView.component.style';


export default class DetailView extends React.Component {
    static navigationOptions = {
      title: 'Album Details',
    };

    render() {
      { /* Using the navigation prop we can get the value passed from the previous screen */ }
      const { navigation } = this.props;
      const albumTitle = navigation.getParam('albumTitle', 'Default data');
      const albumImg = navigation.getParam('albumImg', 'some default value');
      const goBackToHome = () => this.props.navigation.goBack(this.props.navigation.state.key);


      return (
          <React.Fragment>
            <Provider>
              <View style={styles.mainContainer}>
                <View style={styles.albumViewContainer}>
                    <Image source = {{ uri: albumImg }} style={styles.imageView} />
                    <Text style={styles.textStyle}>{albumTitle}</Text>
                    <Button mode="contained"
                        onPress={() => this.props.navigation.navigate('HomeScreen', { goBackToHome, })}
                        style={styles.buttonStyle} testID='HomeButton'>
                        HOME
                    </Button>
                </View>
              </View>
            </Provider>
          </React.Fragment>
      );
    }
}

and I am writing test cases for same as bellow

import 'react-native';
import React, { Component } from 'react';
import { shallow } from 'enzyme';
import AlbumDetailsView from '../component/AlbumDetailsView';


describe('Album Details Screen', () => {

  it('should render Album Details component', () => {
      const wrapper = shallow(<AlbumDetailsView />);
  });

  it('should render initial layout', () => {
  // when
  const component = shallow(<AlbumDetailsView />);
  // then
  expect(component.getElements()).toMatchSnapshot();
  });

  it('should check if BackButton exists', () => {
    const wrapper = shallow(<AlbumDetailsView />);
    wrapper.findWhere(n => n.name() === 'Button' && n.prop('testID') === 'HomeButton')

  });

});

May I know how to handle this?

Answer 1

You need to mock the navigation prop in your test. Of course getParam is undefined, since you haven't passed it in your test. It is passed automatically by react-navigation when running your app, but inside your tests, you have to manually mock it.

it('should render Album Details component', () => {
    const wrapper = shallow(
        <AlbumDetailsView navigation={{ getParam: jest.fn() }} />
    );
});

Now getParam won't be undefined anymore. Of course, using the above code, won't return anything when calling getParam('albumTitle') since in your test getParam() is just a jest.fn(), which can translate to an empty function that does nothing.

If you want to make it return values, you will have to manually implement the mocked function as well, like

it('should render Album Details component', () => {
    const wrapper = shallow(
        <AlbumDetailsView navigation={{ getParam: (param) => {
            if (param === 'albumTitle') return 'albumTitle';
            ...
        } }} />
    );
});