使用 jest、rtl 和 ionic 测试具有输入文本状态更新的反应功能

问题描述

我有一个使用 Ionic React 框架的 React 组件。该组件具有 IonInput 来插入文本和表单提交。 我正在尝试编写一个测试，该测试涵盖处理输入文本的函数内的状态更新，但无法成功运行测试并具有测试通过的代码覆盖率。 下面是我的组件。

import { IonContent,IonHeader,IonPage,IonTitle,IonToolbar,IonImg,IonItem,IonLabel,IonInput,IonCheckBox,IonButton,IonList,IonRow,IonCol,IonRouterLink,IonGrid,IonModal
} from '@ionic/react'

import ExploreContainer from '../components/ExploreContainer'
import './PasswordReset.css'
import { Storage } from '@ionic/storage'
import React,{ useState } from 'react'
import Debug from '../lib/helper'
// import core service for firebase
import firebase from 'firebase/app'
// import individual services into the firebase namespace.
import 'firebase/auth'
import '../styles/global.css'
// import firebase configuration module
import PasswordResetModal from '../modals/PasswordResetModal'
import { useHistory } from 'react-router-dom'
import { Service } from 'src/libs/sdk'

const PasswordReset: React.FC = () => {
    
    /*Start Hooks*/
    const [username,setUsername] = useState('')
    const [error,setError] = useState('')
    const [showModal,setShowModal] = useState(false)
    const history = useHistory()
    /*End Hooks*/   
    Debug.getInstance()
    Debug.logDebug(true)

    const handleUsernameInput= (e: any) =>{
        setUsername(e.target.value)
    }

    const submit = async () => {
        return Service.loginControllerResetPassword({ username: username })
            .then((response) => {
                console.log(response)
                setShowModal(true)
                // Debug.logDebug('EMAIL RESET PASSWORD SENT!')
            })
            .catch((e) => {
                setError(e.message)
            })
    }

    const dismissModal = () => {
        console.log('dismiss')
        setShowModal(false)
        history.push('/login')
    }

    return (
      <IonPage>
        <IonHeader>
          <IonToolbar data-testid="password-reset">
            <IonTitle>Password Reset</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent data-testid="reset-button" fullscreen>
          <IonModal isOpen={showModal}>
            <PasswordResetModal />
            <IonItem>
              <IonButton slot="end" onClick={() => dismissModal()}>
                Ok
              </IonButton>
            </IonItem>
          </IonModal>
          <IonHeader collapse="condense">
            <IonToolbar>
              <IonTitle size="large" data-testid="title">
                Password Reset
              </IonTitle>
            </IonToolbar>
          </IonHeader>
          <div className="ion-text-center">
            <p className="redColor" data-testid="reset-error">
              {error}
            </p>
          </div>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              submit();
            }}
          >
            <IonList>
              <IonItem>
                <IonLabel position="floating" data-testid="reset-email">
                  Email
                </IonLabel>
                <IonInput
                  data-testid="input-field"
                  name="username"
                  value="sss"

                  onIonInput={(e: any) => handleUsernameInput(e)}
                />
              </IonItem>
              <IonButton
                className="ion-margin"
                type="submit"
                expand="block"
                data-testid="password-reset-button"
              >
                Reset Password
              </IonButton>
            </IonList>
          </form>
        </IonContent>
      </IonPage>
    );
}
export default PasswordReset

准确地说，我正在尝试编写一个涵盖以下功能的测试：

  const handleUsernameInput= (e: any) =>{
        setUsername(e.target.value)
    }

更新： 我试过这个测试：

 it("testing on-change event",async() => {
    const { getByTestId } = render(<PasswordReset />);
    const input = getByTestId("input-field");
    const button = getByTestId("password-reset-button");
    fireEvent.ionChange(input,"[e-mail]");
    fireEvent.click(button);

更新2： 我设法使用此代码通过了测试：

test("check email inserted and reset button clicked",async () => {
    const {  findByTitle,findByText } = render(<PasswordReset />);
    const input = await findByTitle("Email");
    const button = await findByText("Reset Password");
    fireEvent.ionChange(input,EMAIL_ADDRESS);
    fireEvent.click(button);
  });

现在表单提交没有通过。任何人都可以建议一种适用于提交的类似方法？

关于如何编写代码覆盖测试以覆盖函数内部状态更新的任何帮助或建议？

谢谢

解决方法

与类组件不同，实际更改值是将该行添加到覆盖范围的唯一方法。

有一篇关于测试离子组件的技术博客文章。

https://ionicframework.com/blog/testing-ionic-react-apps-with-jest-and-react-testing-library/

基本上，你会

import { ionFireEvent as fireEvent } from '@ionic/react-test-utils';

const input = /*that exact target you wish to test input */
fireEvent.ionChange(input,'test todo');

--编辑--

您似乎将 value 的 IonInput 设置为“aaa”。

不应该是 username 吗？