React jest login form test-CodePudding

Hi i am new developer testing platform. I have a problem but I did not find a solution or work it with correct way. I am trying to login component test with to paramater by Inputs. Firstly I filled these are userEvent.type. After I am clicking my button. And when I was waiting my method that call by onSubmitForTest in one time , I am facing an error like fallowing image.

What is the reason of this ? How can I solve my problem ? Thanks for your helps.

My Login.tsx component:

import React, { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import Input from "../../components/Input";
import InputPassword from "../../components/Input/InputPassword";
import ButtonLoading from "../../components/Button/ButtonLoading";
import { GetLoginInfo, ILoginRequest } from "../../store/actions/loginActions";
interface ILoginState {
  emailorUsername: string;
  password: string;
}
const initialState = {
  emailorUsername: "",
  password: "",
};
interface IProps {
  onSubmitForTest: (items: any) => void
}
const Login: FC<IProps> = ({ onSubmitForTest }) => {
  const { t } = useTranslation();
  const [state, setstate] = useState<ILoginState>(initialState);
  const onChange = (key: string, value: string | number) => {
    setstate({ ...state, [key]: value });
  };
  const handleLogin = async () => {
    const loginRequest: ILoginRequest = {
      emailOrUsername: state.emailorUsername,
      password: state.password,
      returnUrl: "",
    };
    const response = await GetLoginInfo(loginRequest);
    if (response.isSucceed) { } else { }
  };
  const renderLoginPart = () => {
    return (
      <div className="flex">
        <Input
          name="emailorUsername"
          label={t("emailorUsername")}
          value={state.emailorUsername}
          onChange={(val: any) => onChange("emailorUsername", val)}
        />
        <InputPassword
          name="password"
          label={t("password")}
          value={state.password}
          onChange={(val: any) => onChange("password", val)}
        />
        <ButtonLoading
          text={t("login")}
          variant="contained"
          onClick={() => {
            if (onSubmitForTest) {
              const loginRequestItemForTest = {
                emailOrUsername: "testUsername",
                password: "testPassword",
              };
              onSubmitForTest(loginRequestItemForTest)
            }
            handleLogin()
          }}
          dataTestid={"login-button-element"}
        />
      </div>
    );
  };
  return <div className="">{renderLoginPart()}</div>;
};
export default Login;

My index.test.js :

    import React from 'react'
    import { render, screen, waitFor } from "@testing-library/react"
    import LoginPage from "../index"
    import userEvent from "@testing-library/user-event"
    
    const onSubmit = jest.fn()
    
    beforeEach(()=>{
      const {  } = render(<LoginPage />)
      onSubmit.mockClear()
    })
    
    test('Login form parametre olarak doğru data gönderme testi', async () => {
      const eMail = screen.getByTestId('text-input-element')
      const password = screen.getByTestId('password-input-element')
      userEvent.type(eMail, "fillWithTestUsername")
      userEvent.type(password, "fillWithTestPassword")
    
      userEvent.click(screen.getByTestId('login-button-element'))
    
      await waitFor(()=>{
        expect(onSubmit).toHaveBeenCalledTimes(1)
  })
})

CodePudding user response：

    beforeEach(()=>{
      render(<LoginPage onSubmitForTest={onSubmit} />)
    })

Please try doing this in beforeEach. If this still doesn't work you can try replacing toHaveBeenCalledTimes with toBeCalledTimes like below

await waitFor(()=>{
        expect(onSubmit).toBeCalledTimes(1)
  })