Mocked function get triggered but toHaveBeenCalledWith do not recognize it

Question

I mocked the useNavigation() hook from react-naitive/navigation but jest do not recognize it.

Jest gives me an error that the function did not get called, but when I log the function it got to be triggered.

I already tried it with wrapping they expect with waitFor but then I just get a typescript catch error Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'catch')]

My jest test:

jest.mock('@react-navigation/native', () => {
  const actualNav = jest.requireActual('@react-navigation/native');
  return {
    ...actualNav,
    useNavigation: () => ({
      // when I do () => { console.log('trigger') } it will be called
      navigate: jest.fn(),
    }),
    useRoute: () => ({
      params: { email: '' },
    }),
  };
});
....

  it.only('should navigate to resend screen when button is pressed', async () => {
    const { getByTestId } = render(
      withStoreProvider(<EmailVerificationPending />),
    );

    await waitFor(() => {
      expect(
        getByTestId('emailVerificationPendingScreen_moreInfoCta'),
      ).toBeTruthy();
    });

    fireEvent.press(getByTestId('emailVerificationPendingScreen_moreInfoCta'));

    expect(navigation.navigate).toHaveBeenCalledWith(
      RootScreens.SignUpNavigator,
      {
        screen: SignUpScreens.EmailVerificationResend,
        params: {
          email: '',
        },
      },
    );
  });

Error message:

  ● features/signup/presentation/email-verification/pending-screen › should navigate to resend screen when button is pressed

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "RootScreens_SignUpNavigator", {"params": {"email": ""}, "screen": "SignUpScreens_EmailVerificationResend"}

    Number of calls: 0

      64 |     fireEvent.press(getByTestId('emailVerificationPendingScreen_moreInfoCta'));
      65 |
    > 66 |     expect(navigation.navigate).toHaveBeenCalledWith(

Answer 1

This error message is likely occurring when you are trying to test a mocked function using the Jest testing framework, and the test is failing because the mocked function is being called but the assertion toHaveBeenCalledWith is not recognizing it.

Here are some possible solutions:

1. Make sure that you are importing the correct mock function and that it is being called in the correct place in your code.

2. Check that the arguments passed to the mocked function match the arguments passed to toHaveBeenCalledWith

3. check if the mock implementation is correct, you should use jest.fn() or jest.spyOn() to create a mock function

4. Make sure that you are using the correct syntax for the toHaveBeenCalledWith assert.

5. Try to debug the test to check if the mocked function is getting called or not.

6. Make sure that you are correctly importing and calling the navigation function, and that it is being called with the correct arguments and parameters.

7. Make sure that the navigation function is being called after the button press event and not before.

8. Make sure that the navigation function is being called in the correct screen and the test is not looking for it in wrong screen.

9. Try using.toHaveBeenCalled() instead of.toHaveBeenCalledWith()

10. Make sure that the test case is not getting skipped or ignored.