How to test arguments of custom hooks with jest - reactjs

Question

I have react-native screen component that i want to test using jest and #testing-library/react-native
It looks something like this
export const SelectPaymentIdScreen = () => {
const { navigateToScreen } = useFlowNavigation();
const [orderId, setOrderId] = useState<string | undefined>(undefined);
const selectedPsp = 'test';
const [paymentError, setPaymentError] = useState<string | undefined>(undefined);
const { isLoading, mutate: getPaymentDetails } = usePaymentMutation(
{ orderId: orderId as string, psp: selectedPsp },
data => {
navigateToScreen('PAYMENT_SCREEN');
return;
}
setPaymentError('Payment provider not supported!');
},
(error: ErrorResponse) => {
setPaymentError(error.message);
},
);
return (
<... some JSX/>
);
};
I wrote my test like this:
const mockGetPaymentDetails = jest.fn();
jest.mock('../bootstrap', () => ({
useFlowNavigation: jest.fn().mockReturnValue({
navigateToScreen: jest.fn(),
}),
}));
jest.mock('../queries', () => ({
usePaymentMutation: jest.fn().mockImplementation(() => {
return { isLoading: false, mutate: mockGetPaymentDetails };
}),
}));
describe('Test SelectPaymentIdScreen', () => {
it('Renders screen correctly and checkout button is disabled when text input is empty', () => {
const { getByLabelText, getByText } = render(<SelectPaymentIdScreen />);
const input = getByLabelText('TextInputField');
const checkoutButton = getByText('CHECKOUT');
expect(input).toBeTruthy();
expect(checkoutButton).toBeTruthy();
//Checkout button should be disabled
fireEvent.press(checkoutButton);
expect(mockGetPaymentDetails).toHaveBeenCalledTimes(0);
fireEvent.changeText(input, '1234');
fireEvent.press(checkoutButton);
expect(mockGetPaymentDetails).toHaveBeenCalledTimes(1);
});
});
This works however if i run coverage report it says i am not testing this second and third arguments of usePaymentMutation.
I am not sure how to test them. I can extract second argument to a separate file but the problem is that this function depends on navigateToScreen which i need to pass it and than again i have non-tested function as the second argument.

Answer 1

I will try something like:
const mockGetPaymentDetails = jest.fn();
jest.mock('../bootstrap', () => ({
useFlowNavigation: jest.fn().mockReturnValue({
navigateToScreen: jest.fn(),
}),
}));
jest.mock('../queries', () => ({
usePaymentMutation: jest.fn().mockImplementation((data, successCl, errorCl) => {
return {
isLoading: false,
mutate: () => {
mockGetPaymentDetails()
successCl()
}
};
}),
}));
and in your test, you can now test that successCl was called when you call mockGetPaymentDetails. Then something similar for errorCl.