React Navigation Unit Testing Components with useRoute()

Question

I have a component

export function Component() {
  const route = useRoute<RouteProp<StackParamList>>();
  const amount = route.params.amount

  return (<View> <Text>{amount} is now</Text></View>)
}

and my test is very simple but it fails, I am just checking if the text is rendered.

test('should display amount', () => {
  const screen = renderWithWrapper(
    <Navigation>
     <Component />
    </Navigation>
  ) 
 expect(screen.queryByText(/is now/))
})

The code fails here const amount = route.params.amount says TypeError: Cannot read properties of undefined (. reading params).

I guess my question is how do I mock the useRoute to receive the amount params??

score 0 · Answer 1 · answered Jan 05 '23 at 10:43

The way I did something similar was by using a Spy:


test('should display amount', () => {
  const mockUseRoute = jest.spyOn(require('@react-navigation/native'), 'useRoute');
  mockUseRoute.mockImplementation(() => ({
    params: {
      amount: 1000,
    },
  }));

  const screen = renderWithWrapper(
    <Navigation>
     <Component />
    </Navigation>
  ) 
 expect(screen.queryByText(/is now/))
})

React Navigation Unit Testing Components with useRoute()

1 Answers1