Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Mock on a component going to another test?? #914

Answered by ftzi
ftzi asked this question in Q&A
Discussion options

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?

You must be logged in to vote

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.

Replies: 1 comment

Comment options

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.

You must be logged in to vote
0 replies
Answer selected by ftzi
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /