I am trying to test my react native hooks component, I am able to access/test use state variable but not able to test arrow methods in my functional component, kindly provide some suggestions.Attached sample code and test
interface IProps { previousSceneName?: string, selectedTab?: number,}type Props = IPropsexport default function LoginComponent(props: IProps) { var [userName, setUserName] = useState("") var [password, setPassword] = useState("") const _userName = (text: string) => { setUserName(text) setUserNameError("") } const _setPassword = (text: string) => { setPassword(text) setPasswordError("") } const _isValidationPassed = () => { if (userName.length === 0 && password.length === 0) { setUserNameError(Errors.requiredMsg); setPasswordError(Errors.requiredMsg); return false } else if (userName.length === 0) { setUserNameError(Errors.requiredMsg); return false } else if (password.length === 0) { setPasswordError(Errors.requiredMsg); return false } else return true } const _userLogin = () => { if (_isValidationPassed()) { return true } return false; } return (<View><CustomTextfield viewStyle= { style.textFieldView } placeHolderColor = { Colors.orderStatusColor } selectionColor = { Colors.darkBlue } label = { "Username"} isMandatory = { true} placeholder = { General.userNamePlaceholder } errorMsg = { userNameError } onChangeText = { _userName } value = { userName } style = {{ textTransform: "none", width: '100%' }} maxLength = { 50} autoCapitalize = { "none"} autoCompleteType = { "off"} autoCorrect = { false} testID = "Username" /><CustomTextfield secureTextEntry // @ts-ignore viewStyle = { style.textFieldView } // @ts-ignore // labelTextStyle={style.customLabelView} placeHolderColor = { Colors.orderStatusColor } label = { "Password"} selectionColor = { Colors.darkBlue } isMandatory = { true} placeholder = { General.passwordPlaceholder } errorMsg = { passwordError } onChangeText = { _setPassword } value = { password } style = {{ textTransform: "none", width: '100%' }} maxLength = { 50} autoCapitalize = { "none"} autoCompleteType = { "off"} autoCorrect = { false} testID = "Password" /><Button testID="loginSubmit" onPress = { _userLogin } full style = { style.bottomButton } ><Text style={ style.buttonText1 }> GET STARTED </Text></Button></View>)}My test file is(Commented code i am using to test that function),kinldy provide answers for testing the _isValidationPassed and _userLogin methods
describe("Test Hooks", () => { let props: any; let wrapper3: any; // const _userLogin = jest.fn(); let wrapper1; const tree = renderer.create(<Provider store={store}><LoginComponent /></Provider> ) it("should render without throwing an error", () => { expect(tree.toJSON()).toMatchSnapshot(); }); // beforeEach(() => { // const wrapper = mount(<Provider store={store}> // <LoginComponent _userLogin={_userLogin} /> // </Provider>); // wrapper.find('Button[testID="loginSubmit"]').simulate('click'); // }); it("includes two paragraphs", () => { const wrapper = mount(<Provider store={store}><LoginComponent /></Provider> ); expect(wrapper.find("CustomTextfield")).toHaveLength(2); expect(wrapper.find("Button")).toHaveLength(3); expect(wrapper.find('Button[testID="loginSubmit"]')).toHaveLength(1); }); // beforeEach(() => { // wrapper1 = shallow(<Provider store={store}> // <LoginComponent _isValidationPassed={_isValidationPassedTest} /> // </Provider>); // }); beforeEach(() => { jest.spyOn(console, "warn").mockImplementation(() => {}); }); test("should have the login enabled with valid values", async () => { const { getByTestId } = render(<Provider store={store}><LoginComponent /></Provider> ); const wrapper1 = mount(<Provider store={store}><LoginComponent /></Provider> ); fireEvent.changeText(getByTestId("Username"), "abdul"); expect(getByTestId("Username").props.value).toEqual("abdul"); fireEvent.changeText(getByTestId("Password"), "1234"); expect(getByTestId("Password").props.value).toEqual("1234"); //fireEvent.press(getByTestId("loginSubmit")); //expect(result.current).toBe(now); //expect(mockFn).toBeCalledTimes(1); });});