How to mock react navigation params value with jest

Question

I am new to jest and I am trying to test the rendering of a component, but I am having problems when mocking the params it receives thanks to react navigation.

This is the test:

describe('<GameScreen /> tests', () => {
it('Render the component correctly ', () => {

    const route = {
      isAccesibilityModeOn: false
    }
    const navigate = jest.fn();
    const tree = renderer.create(<GameScreen route= {route} navigation={{ navigate }} />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

This is my component, which is receiving a boolean value in the form of the variable isAccesibilityModeOn:

export default function GameView({route, navigation}) {

  const {isAccesibilityModeOn} = route.params;'
  
 return(<Text>Hello</Text>)
}

The error the console gives me is this

TypeError: Cannot read property 'isAccesibilityModeOn' of undefinedJest

So the question is, how can I mock the value of parameters of the component?

Answer 1

Take a look at route object you pass as a prop - it's missing params property. In component you try to access isAccesibilityModeOn property of unknown params therefore you see this error.