Mock on a component going to another test??

[SrBrahma]

I have those two tests inside a describe():

describe('SignIn', () => {
  // https://stackoverflow.com/a/52619219/10247962
  const createTestProps = (props: Record<string, any>) => ({
    navigation: {
      navigate: jest.fn(),
    },
    ...props,
  });
  let props: any; // use type "any" to opt-out of type-checking
  beforeEach(() => {
    props = createTestProps({});
    jest.clearAllMocks(); // This doesn't fix my issue
  });
  it('must SignIn using valid no-api test account', async () => {
    const mockFn = jest.fn();
    const email = 'test@mail.com'; // valid email for test account
    const password = '12345678'; // valid password
    const { getByTestId } = render(<SignIn onSubmit={mockFn}/>);
    await fireEvent.changeText(getByTestId('signin_email'), email);
    await fireEvent.changeText(getByTestId('signin_password'), password);
    await act(async () => { await fireEvent.press(getByTestId('signin_submit'));}); // Required for some strange reason, error without it.
    expect(mockFn).toBeCalledWith({ email, password });
  });

  it('must complain about invalid SignInScreen using no-api account but with wrong password', async () => {
    const email = 'test@mail.com';
    const password = 'wrongpassword';
    const { getByTestId, getByText } = render(<SignInScreen {...props}/>);
    await fireEvent.changeText(getByTestId('signin_email'), email);
    await fireEvent.changeText(getByTestId('signin_password'), password);
    await act(async () => { await fireEvent.press(getByTestId('signin_submit')); });
    expect(getByText('Usuário e/ou senha inválidos')).toBeTruthy();
  });

});

(yeah, for some reason those await and act were necessary, textinputs wouldn't be filled or errors without them)
(SignInScreen is a navigation component wrapping the SignIn component)

Test:

 FAIL   Android  src/screens/Main/LoginWall.test.tsx (13.993 s)
  SignIn
    ✕ must SignIn using valid no-api test account (214 ms)
    ✓ must complain about invalid SignInScreen using no-api account but with wrong password (152 ms)

  ● SignIn › must SignIn using valid no-api test account

    TypeError: Cannot read properties of undefined (reading 'catch')

      134 |   const { components: { TextInput }, handleSubmit } = useForm<SignInProps>({ idToLabel: signInIdToLabel });
      135 |   const [visibleSnackbar, setVisibleSnackbar] = useState<string | false>();
    > 136 |   const onPress = handleSubmit(function valid(p) { onSubmit(p).catch((e) => setVisibleSnackbar(e.message));},
          |                                                    ^
      137 |     function invalid(e) {
      138 |       const error = Object.entries(e)[0]!;
      139 |       const label = (signInIdToLabel as any)?.[error[0]] ?? error[0];

      at key (src/screens/Main/LoginWall.tsx:136:52)
      at node_modules/react-hook-form/src/logic/createFormControl.ts:1048:47

The onSubmit is not retuning a Promise as it should, but here what is causing it: The first test. The mock is replacing the onSubmit on the second test for some very strange reason. The onSubmit is a prop that is passed from SignInScreen to SignIn.

If I comment the first test, the second one works fine.

WHY this is happening??? How can I fix it?

[SrBrahma]

Actually, I am stupid lol

The error is being raised on the first test, not the second one. As jest.fn() isn't a promise, there isn't a catch prop.