使用jest和IONAL编写reactjs组件的测试覆盖率

我正在尝试为使用ionic react实现的注册组件编写一个测试覆盖率。我有一个提交函数：

submitRegistration（）。但是，我无法让测试覆盖整个功能实现。
这是我的组件：

imports...

const Registration: React.FC = () => {

    /*Start Hooks*/
    const [name, setName] = useState('')
    const [surname, setSurname] = useState('')
    const [phone, setPhone] = useState('')
    const [birthdate, setBirthdate] = useState('')
    const [email, setEmail] = useState('')
    const [emailVerify, setEmailVerify] = useState('')
    const [password, setPassword] = useState('')
    const [passwordVerify, setPasswordVerify] = useState('')
    const [checkedTerms, setCheckedTerms] = useState(false)
    const [checkedGDPR, setCheckedGDPR] = useState(false)
    const [checkedCaptcha, setCheckedCaptcha] = useState('')
    const [error, setError] = useState('')
    const [showLoading, setShowLoading] = useState(false)
    //Modals for terms and Conditions and GDPR
    const [showGDPRModal, setShowGDPRModal] = useState(false)
    const [showTermsAndConditionsModal, setShowTermsAndConditionsModal] = useState(false)


    const history = useHistory()
    const maxLengthInput = 25

    function onChange(value: any) {
        //console.log("Captcha value:", value);
        if (value === null) setCheckedCaptcha('')
        else setCheckedCaptcha(value)
    }

    const handleNameInput = (e: any) => {
        setName(e.target.value)
    }
    const handleSurnameInput = (e: any) => {
        setSurname(e.target.value)
    }
    const handlePhoneInput = (e: any) => {
        setPhone(e.target.value)
    }
    const handleBirthdateInput = (e: any) => {
        setBirthdate(e.detail.value)
    }
    const handleEmailInput = (e: any) => {
        setEmail(e.target.value)
    }
    const handleEmailVerifyInput = (e: any) => {
        setEmailVerify(e.target.value)
    }
    const handlePasswordInput = (e: any) => {
        setPassword(e.target.value)
    }
    const handlePasswordVerifyInput = (e: any) => {
        setPasswordVerify(e.target.value)
    }
    const toggleButton = () => {
        return !name || !surname || !birthdate || !phone || !email || !emailVerify || !password || !passwordVerify || !checkedTerms || !checkedCaptcha || !checkedGDPR
    }
    function checkBirthdate18() {
        const years = moment().diff(birthdate, 'years', true)
        if (years >= 18) return true

        return false
    }
    function checkEqualEmail() {
        return email === emailVerify
    }
    function checkEqualPassword() {
        return password === passwordVerify
    }

    function createUser() {
        return Service.registrationControllerRegistrationProcess({
            email: email,
            emailConfirmation: emailVerify,
            password: password,
            passwordConfirmation: passwordVerify,
            name: name,
            surname: surname,
            birthdate: birthdate,
            phone: phone,
            termsAndConditions: checkedTerms,
            gdpr: checkedGDPR,
            captcha: checkedCaptcha,
        })
            .then((response: any) => {
                setShowLoading(false)
                const emailSent = true
                history.push({
                    pathname: '/login',
                    state: emailSent,
                })
            })
            .catch((e) => {
                console.error('Error:', error)
                setError(e.message)
                firebase.auth().signOut()
                setShowLoading(false) //Dismiss loading
            })
    }

    const submitRegistration = async () => {

        //check if name is not empty. Should never happen
        if (!name) {
            setError('Name is empty.')
            return
        }
        //check if name is not empty. Should never happen
        if (!surname) {
            setError('Surname is empty.')
            return
        }
        //check if phone number is not empty. Should never happen
        if (!phone) {
            setError('Phone number is empty.')
            return
        }
        //check if birthdate is not empty. Should never happen
        if (!birthdate) {
            setError('Birthdate is empty')
            return
        }
        if (!checkBirthdate18()) {
            setError('You must be at least 18 years old')
            return
        }

        //check if email is not empty. Should never happen
        if (!email) {
            setError('Email is empty.')
            return
        }
        //check if emailVerify is not empty. Should never happen
        if (!emailVerify) {
            setError('Email confirmation is empty.')
            return
        }
        //Check if emails are the same
        if (!checkEqualEmail()) {
            setError('Email and Email confirmation must be equal.')
            return
        }

        //check if password is not empty. Should never happen
        if (!password) {
            setError('Password is empty.')
            return
        }
        //check if passwordVerify is not empty. Should never happen
        if (!passwordVerify) {
            setError('Password confirmation is empty.')
            return
        }
        //Check if password supplied are the same
        if (!checkEqualPassword()) {
            setError('Password and Password confirmation must be equal')
            return
        }
        //Password strong enough
        // One number 
        // One symbol 
        // At least 8 characters 
        // Personal data of the user
        // Create a schema
        const schema = new passwordValidator()
        // Add properties to it
        schema
            .is().min(8)                                    // Minimum length 8
            .is().max(20)                                   // Maximum length 20
            .has().symbols(1)                               // Must have at leasst 1 symbols
            .has().digits(1)                                // Must have at least 1 digits
            .has().not().spaces()                           // Should not have spaces
            .is().not().oneOf([name, surname, email]) // Blacklist these values

        const validator = schema.validate(password, { list: true })
        if (validator.length) {
            //Password not strong enough
            setError('Password must have: \n at least 8 chars \n 1 symbol \n 1 digit \n no spaces \n no your name \n no your surname \n no your email')
            return
        }
        //check if Terms is not empty. Should never happen
        if (!checkedTerms) {
            setError('Terms and Conditions must be checked.')
            return
        }

        if (!checkedGDPR) {
            setError('GDPR must be checked.')
            return
        }
        

        //Enable loading
        setShowLoading(true)
        setError('')

        //Create user
        createUser()
    }

    const dismissGDPRModal = () => {
        setShowGDPRModal(false)
        setCheckedGDPR(false)
    }

    const dismissGDPRModalWithAcceptance = () => {
        setShowGDPRModal(false)
        setCheckedGDPR(true)
    }

    const clickGDPRLink = (event: any) => {
        event.preventDefault()
        //Show GDPR modal
        setShowGDPRModal(true)
    }

    const dismissTermsAndConditionsModal = () => {
        setShowTermsAndConditionsModal(false)
        setCheckedTerms(false)
    }

    const dismissTermsAndConditionsModalWithAcceptance = () => {
        setShowTermsAndConditionsModal(false)
        setCheckedTerms(true)
    }

    const clickTermsAndConditionsLink = (event: any) => {
        event.preventDefault()
        //Show terms and conditions modal
        setShowTermsAndConditionsModal(true)
    }

    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle data-testid="title">Sign up</IonTitle>
            <IonText
              data-testid="account-exists"
              className="ion-padding"
              slot="end"
            >
              Do you already have an account?{" "}
              <IonRouterLink data-testid="login-page" href="/login">
                Sign in
              </IonRouterLink>
            </IonText>
          </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
          <IonModal isOpen={showGDPRModal}>
            <GDPRModal />
            <IonItem>
              <IonButton
                data-testid="cancel"
                slot="end"
                onClick={() => dismissGDPRModal()}
              >
                Cancel
              </IonButton>
              <IonButton
                data-testid="accept"
                class="no-left-padding"
                slot="end"
                onClick={() => dismissGDPRModalWithAcceptance()}
              >
                Accept
              </IonButton>
            </IonItem>
          </IonModal>

          <IonModal isOpen={showTermsAndConditionsModal}>
            <TermsAndConditionsModal />
            <IonItem>
              <IonButton
                data-testid="cancel-gdpr"
                slot="end"
                onClick={() => dismissTermsAndConditionsModal()}
              >
                Cancel
              </IonButton>
              <IonButton
                data-testid="accept-gdpr"
                class="no-left-padding"
                slot="end"
                onClick={() => dismissTermsAndConditionsModalWithAcceptance()}
              >
                Accept
              </IonButton>
            </IonItem>
          </IonModal>
          <IonLoading isOpen={showLoading} message={"Please wait..."} />
          <IonHeader collapse="condense">
            <IonToolbar>
              <IonTitle data-testid="sign-up" size="large">
                Sign up
              </IonTitle>
            </IonToolbar>
          </IonHeader>
          <form
            data-testid="submit-form"
            onSubmit={(e) => {
              e.preventDefault();
              submitRegistration();
            }}
          >
            <IonGrid>
              <IonItemGroup class="ion-margin">
                <IonItemDivider>
                  <IonLabel data-testid="personal-info">
                    Personal Information
                  </IonLabel>
                </IonItemDivider>
                {/* Start First row */}
                <IonRow>
                  <IonCol>
                    <IonItem>
                      <IonLabel data-testid="name" position="floating">
                        Name
                      </IonLabel>
                      <IonInput
                        name="name"
                        title="Name"
                        maxlength={maxLengthInput}
                        value={name}
                        onIonInput={(e: any) => handleNameInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                  <IonCol>
                    <IonItem>
                      <IonLabel data-testid="surname" position="floating">
                        Surname
                      </IonLabel>
                      <IonInput
                        name="surname"
                        title="Surname"
                        value={surname}
                        onIonInput={(e: any) => handleSurnameInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                </IonRow>
                {/* Start Second row */}
                <IonRow>
                  <IonCol>
                    <IonItem>
                      <IonLabel data-testid="date-of-birth" position="floating">
                        Birthdate
                      </IonLabel>
                      <IonDatetime
                        title="Birthdate"
                        value={birthdate}
                        onIonChange={(e: any) => handleBirthdateInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                  <IonCol>
                    <IonItem>
                      <IonLabel data-testid="phone" position="floating">
                        Phone
                      </IonLabel>
                      <IonInput
                        type="tel"
                        title="Phone"
                        name="phone"
                        value={phone}
                        onIonInput={(e: any) => handlePhoneInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                </IonRow>
              </IonItemGroup>
              {/* Start Third row */}
              <IonItemGroup class="ion-margin">
                <IonItemDivider>
                  <IonLabel data-testid="email-info">
                    Email Information
                  </IonLabel>
                </IonItemDivider>
                <IonRow>
                  <IonCol>
                    <IonItem>
                      <IonLabel data-testid="email" position="floating">
                        Email
                      </IonLabel>
                      <IonInput
                        title="Email"
                        type="email"
                        value={email}
                        onIonInput={(e: any) => handleEmailInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                </IonRow>
                <IonRow>
                  <IonCol>
                    <IonItem>
                      <IonLabel
                        position="floating"
                        data-testid="email-confirmation"
                      >
                        Email Confirmation
                      </IonLabel>
                      <IonInput
                        title="Email Confirmation"
                        type="email"
                        value={emailVerify}
                        onIonInput={(e: any) => handleEmailVerifyInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                </IonRow>
              </IonItemGroup>
              <IonItemGroup class="ion-margin">
                <IonItemDivider>
                  <IonLabel data-testid="password-info">
                    Password Information
                  </IonLabel>
                </IonItemDivider>
                <IonRow>
                  <IonCol>
                    <IonItem>
                      <IonLabel position="floating" data-testid="password">
                        Password
                      </IonLabel>
                      <IonInput
                        title="Password"
                        type="password"
                        value={password}
                        onIonInput={(e: any) => handlePasswordInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                </IonRow>
                <IonRow>
                  <IonCol>
                    <IonItem>
                      <IonLabel
                        position="floating"
                        data-testid="password-confirmation"
                      >
                        Password Confirmation
                      </IonLabel>
                      <IonInput
                        title="Password Confirmation"
                        type="password"
                        value={passwordVerify}
                        onIonChange={(e: any) => handlePasswordVerifyInput(e)}
                      />
                    </IonItem>
                  </IonCol>
                </IonRow>
              </IonItemGroup>
              <IonRow>
                <IonCol>
                  <IonItem>
                    <IonLabel data-testid="agree-to-terms">
                      I agree to the{" "}
                      <IonRouterLink
                        href="#"
                        onClick={(e) => clickTermsAndConditionsLink(e)}
                      >
                        <IonText data-testid="terms" color="danger">
                          {" "}
                          Terms and Conditions{" "}
                        </IonText>{" "}
                      </IonRouterLink>{" "}
                    </IonLabel>
                    <IonCheckbox
                      checked={checkedTerms}
                      title="Terms"
                      onIonChange={(e: any) =>
                        setCheckedTerms(e.detail.checked)
                      }
                    />
                  </IonItem>
                </IonCol>
              </IonRow>
              <IonRow>
                <IonCol>
                  <IonItem>
                    <IonLabel>
                      I agree to the{" "}
                      <IonRouterLink href="#" onClick={(e) => clickGDPRLink(e)}>
                        <IonText color="danger"> GDPR </IonText>
                      </IonRouterLink>{" "}
                    </IonLabel>
                    <IonCheckbox
                      title="GDPR"
                      checked={checkedGDPR}
                      onIonChange={(e: any) => setCheckedGDPR(e.detail.checked)}
                    />
                  </IonItem>
                </IonCol>
              </IonRow>
              <IonRow>
                <IonCol className="ion-text-center">
                  {/* Captcha */}
                  <ReCAPTCHA
                    data-testid="recaptcha"
                    sitekey={process.env.REACT_APP_RECAPTCHA_KEY!}
                    onChange={onChange}
                  />
                </IonCol>
              </IonRow>
            </IonGrid>
            <div className="ion-text-center">
              <p className="redColor"> {error} </p>
            </div>
            <IonButton
              disabled={toggleButton()}
              className="ion-margin"
              type="submit"
              expand="block"
              data-testid="register"
            >
              Continue
            </IonButton>
          </form>
        </IonContent>
      </IonPage>
    );
}

export default Registration


导入。。。
常量注册：React.FC=（）=>{
/*启动挂钩*/
const[name，setName]=useState（“”）
常量[姓氏，setSurname]=使用状态（“”）
const[phone，setPhone]=使用状态（“”）
常量[出生日期，设定日期]=useState（“”）
const[email，setEmail]=useState（“”）
const[emailVerify，setEmailVerify]=useState（“”）
const[password，setPassword]=useState（“”）
const[passwordVerify，setPasswordVerify]=useState（“”）
常量[checkedTerms，setCheckedTerms]=useState（false）
const[checkedGDPR，setCheckedGDPR]=useState（false）
常量[checkedCaptcha，setCheckedCaptcha]=useState（“”）
const[error，setError]=useState（“”）
const[showLoading，setShowLoading]=useState（false）
//条款和条件以及GDPR的模态
const[showGDPRModal，setShowGDPRModal]=useState（false）
const[showTermsAndConditionsModal，setShowTermsAndConditionsModal]=useState（false）
const history=useHistory（）
常量最大长度输入=25
函数onChange（值：any）{
//log（“验证码值：”，值）；
如果（值===null）setCheckedCaptcha（“”）
else setCheckedCaptcha（值）
}
常量handleNameInput=（e:any）=>{
setName（例如target.value）
}
const handleSurnameInput=（e:any）=>{
setSurname（例如，target.value）
}
const handlePhoneInput=（e:any）=>{
设置电话（如目标值）
}
常量handleBirthdateInput=（e:any）=>{
setBirthdate（如详细信息值）
}
const handleEmailInput=（e:any）=>{
setEmail（例如target.value）
}
const handleEmailVerifyInput=（e:any）=>{
setEmailVerify（例如target.value）
}
const handlePasswordInput=（e:any）=>{
设置密码（如目标值）
}
const handlePasswordVerifyInput=（e:any）=>{
setPasswordVerify（如target.value）
}
常量切换按钮=（）=>{
return！name | | | | | |姓氏| | |生日| | |电话| | |电子邮件| | | |电子邮件验证| | | | | |密码验证| | | | | | | | |密码验证
}
函数checkBirthdate18（）{
const years=moment（）.diff（生日“年”，真）
如果（年数>=18）返回true
返回错误
}
函数checkEqualEmail（）{
返回电子邮件===emailVerify
}
函数checkEqualPassword（）{
返回密码===密码验证
}
函数createUser（）{
return Service.registrationControllerRegistrationProcess({
电邮:电邮,，
emailConfirmation:emailVerify，
密码：密码，
passwordConfirmation:passwordVerify，
姓名:姓名,，
姓:姓,，
生日：生日，
电话:电话,，
条款和条件：检查条款，
gdpr:CHECKEDGDR，
验证码：已检查验证码，
})
。然后（（响应：任意）=>{
设置加载（错误）
const emailSent=true
历史推送({
路径名：'/login'，
状态：已发送电子邮件，
})
})
.catch（（e）=>{
console.error（'error:'，error）
设置错误（例如消息）
firebase.auth（）.signOut（）
设置加载（false）//解除加载
})
}
const submitRegistration=async（）=>{
//检查名称是否不为空。不应出现
如果（！name）{
setError（'名称为空'）
返回
}
//检查名称是否不为空。不应出现
如果（！姓）{
setError（'姓氏为空'）
返回
}
//检查电话号码是否为空。不应该发生
如果（！电话）{
setError（'电话号码为空'）
返回
}
//检查生日是否为空。不应发生
如果（！生日）{
setError（'生日为空'）
返回
}
如果（！checkBirthdate18（））{
setError（'您必须至少18岁'）
返回
}
//检查电子邮件是否为空。不应该发生
如果（！电子邮件）{
setError（'电子邮件为空'）
返回
}
//检查emailVerify是否为空。不应发生
如果（！emailVerify）{
setError（'电子邮件确认为空'）
返回
}
//检查电子邮件是否相同
如果（！checkEqualEmail（））{
setError（'电子邮件和电子邮件确认必须相等'）
返回
}
//检查密码是否为空。不应出现这种情况
如果（！密码）{
setError（'密码为空'）
返回
}
//检查passwordVerify是否为空。不应发生
如果（！passwordVerify）{
setError（'密码确认为空'）
返回
}
//检查提供的密码是否相同
如果（！checkEqualPassword（））{
setError（'密码和密码确认必须相等'）
返回
}
//密码足够强
//一个数字
//一个符号
//至少8个字符
//使用者的个人资料
//创建一个模式
const schema=new passwordValidator（）
//向其添加属性
模式
.is（）.min（8）//最小长度8
.is（）.max（20）
it("onSubmit to have been called", async () => {
    const mock = jest.fn();
     const { findByTitle,getByTestId, findByTestId, findByText } = render(<Registration />);

     const name = await findByTitle("Name");
     const surname = await findByTitle("Surname");
     const email = await findByTitle("Email");
     const emailConfirm = await findByTitle("Email Confirmation");
     const password = await findByTitle("Password");
     const birthdate = await findByTitle("Birthdate");
     const phone = await findByTitle("Phone");
     const passwordConfirm = await findByTitle("Password Confirmation");
     const termsAndConditions = await findByTitle("Terms");
   

     const button = await findByText("Continue");

     fireEvent.ionInput(name, "name");
     fireEvent.ionInput(surname, "surname");
 fireEvent.ionInput(email, “my email");
     fireEvent.ionInput(emailConfirm, "my email");
     fireEvent.ionChange(birthdate, "date of birth");
     fireEvent.ionInput(phone, "121212121212");
     fireEvent.ionInput(password, "pass123");
     fireEvent.ionChange(passwordConfirm, "pass123");
     fireEvent.ionChange(termsAndConditions, "true");

     fireEvent.click(button);
    const form = getByTestId("submit-form");
    fireEvent.submit(form);
    expect(mock).not.toHaveBeenCalled();

  });