Testing Navigate actions with jest react-native app with redux

[jose920405]

Current Behavior

I am creating my test with jest and I have blocked trying to make the react-navigation actions work

Example:

this.props.navigation.navigate('ForgotPasswordScreen')

My TestFile:

const store = createStore(
  combineReducers(
    {
      user: require('../../App/Redux/Reducers/UserReducer').reducer,
    }
  )
);

shallow(
    <LoginScreen />,
    { context: { store }, lifecycleExperimental: true },
  );

My LoginScreen File

class LoginScreen extends Component {

  constructor(props) {
    super(props)

    this.onClickBtnForgot = this.onClickBtnForgot.bind(this)
  }
    
  onClickBtnForgot() {
    this.props.navigation.navigate('ForgotPasswordScreen') // !!!HERE ERROR!!!!
  }

  render() {
    return (
      <View style={styles.mainContainer}>
          <TouchableOpacity onPress={() => { this.onClickBtnForgot() }}>
            <Text style={styles.forgotPass}>{'Forgot Password'}</Text>
          </TouchableOpacity>
      </View>
    )
  }
}

This is my jest error log:

TypeError: Cannot read property 'navigate' of undefined.

This makes sense since navigation is undefined, since I'm not passing as prop to my component when I load it with shallow

Given this, I tried to add addNavigationHelpers in navigation as a prop to LoginScreen. As this link

import * as ReactNavigation from 'react-navigation'

const navigation = ReactNavigation.addNavigationHelpers({
  // dispatch, // ===> ! do not know how to make the dispatch available in my test file!
  state: require('../../App/Redux/NavigationRedux').reducer
})

shallow(
    <LoginScreen navigation={navigation} />, //Here passing
    { context: { store }, lifecycleExperimental: true },
  );

Doing all this, I get the following error:

/Users/myUser/Documents/git-repos/dev-react-native/myProj-react-native/myProj/node_modules/react-navigation/src/createNavigationContainer.js:3
    import React from 'react';
    ^^^^^^
    SyntaxError: Unexpected token import

I have also seen this same error in an issue posted by another user

looking for this error, I found IN YOUR README that in the jest configuration in the package.json you can add a piece of code to solve it or rather to ignore it.

    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation)"
    ],

Being as follows:

 "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation)"
    ],
    "preset": "react-native"
  },

When i run my test again, another problem that I knew I would find:

TypeError: navigation.dispatch is not a function

---

This is where things start to get tangled up
(I do not know if I'm already out of the way and I'm looking for more problems)**

When I created my addNavigationHelpers I knew I had not found a way to get the dispatch that should be passed just to reduce navigation.

What should be saved should look something like this:

navigation={addNavigationHelpers({
    dispatch: this.props.dispatch,
    state: this.props.nav,
})}

And as I mentioned earlier that I do not know how to pass that dispatch.

Reply code again:

const navigation = ReactNavigation.addNavigationHelpers({
  // dispatch, // ===> ! do not know how to make the dispatch available in my test file!
  state: require('../../App/Redux/NavigationRedux').reducer
})

Here is how far I've come and I've been thinking that maybe I've deviated from the logical way at some point and maybe something I'm trying to do has no meaning

It is for this reason that I am requesting your help to guide me a little of which is the way I should take about this case.

The idea is that my tests can run even if they enter functions that have navigation.navigate ('MyScreen').

Beforehand thank you very much.

My Environment

software	version
react-navigation	1.0.0-beta.11
react	16.0.0-alpha.12
react-native	0.47.2
node	v7.10.1
npm or yarn	v0.24.6

[floringit]

I solved it in this way:

const navigation = { navigate: jest.fn() };

const wrapper = shallow(
    <ParentComp navigation={navigation} />
);

const navigateFNSpy = sinon.spy(ParentComp.prototype, '_navigateFN');

In my example _navigateFN method calls navigate and the test is passing now.

[jamesmcn1]

if using the solution @floringit suggested, you may want to export the non HOC version of your component by adding an export statement to the component definition, as opposed to exporting the default component:

ie

export class LoginScreen extends Component {

  constructor(props) {
    super(props)

    this.onClickBtnForgot = this.onClickBtnForgot.bind(this)
  }
    
  onClickBtnForgot() {
    this.props.navigation.navigate('ForgotPasswordScreen') // !!!HERE ERROR!!!!
  }

  render() {
    return (
      <View style={styles.mainContainer}>
          <TouchableOpacity onPress={() => { this.onClickBtnForgot() }}>
            <Text style={styles.forgotPass}>{'Forgot Password'}</Text>
          </TouchableOpacity>
      </View>
    )
  }
}

...


export default connect(withNavigation(LoginScreen))

then import the component like so in the test file:

import { LoginScreen } from '....'

then you can pass in navigation as props

https://redux.js.org/recipes/writingtests#connected-components