Как протестировать усиление регистрации авторизации в реакции с помощью Jest + Enzyme?

Мне нужно протестировать метод регистрации вместе с регистрацией аутентификации с усилением, которая написана в моем файле действий.

import history from "../utils/history.helper";
import { alertInfo } from "../utils/common.helper";
import { Auth } from "aws-amplify";

export const AuthAction = {
  register,
};

function register(signUpData) {
  return async (dispatch) => {
    const {
      username,
      password,
      company_name,
      country_name,
      designation,
    } = signUpData;
    try {
      const signUpResponse = await Auth.signUp({
        username,
        password,
        attributes: {
          "custom:company_name": company_name,
          "custom:country_name": country_name,
          "custom:designation": designation,
        },
      });

      alertInfo("success", "Please verify the mail,for successfull login");
      history.push("/login");
    } catch (error) {
      alertInfo("error", error.message);
    }
  };
}]

Этот файл действия я вызываю из моего компонента регистрации

import React from "react";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import { yupResolver } from "@hookform/resolvers/yup";

import content from "./content";
import { AuthInputField } from "../../common/FieldComponent";
import { AuthAction } from "../../../actions/auth.action";
import { signupSchema } from "../../common/Validation";

const SignupForm = () => {
  const dispatch = useDispatch();
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(signupSchema),
  });
  const [buttonDisable, setButtonDisable] = React.useState(false);
  function onSubmit(signUpData) {
    setButtonDisable(true);
    dispatch(AuthAction.register(signUpData));
  }
  return (
    <div className = "container" data-test = "signUpContainer">
      <h4>Welcome</h4>
      <p>Please resigter to your account.</p>
      <form data-testid = "submit" onSubmit = {handleSubmit(onSubmit)}>
        {content.inputs.map((input, index) => {
          return (
            <AuthInputField
              key = {index}
              name = {input.name}
              label = {input.label}
              placeholder = {input.placeholder}
              type = {input.type}
              register = {register}
              error = {(errors && errors[input.name] && errors[input.name]) || {}}
            />
          );
        })}

        <input
          type = "submit"
          className = "btn btn-primary button"
          name = "submit"
          value = {`Submit`}
          role = "submit"
          disabled = {buttonDisable}
        />
      </form>
    </div>
  );
};

export default SignupForm;

Я пытаюсь найти способ тестирования «Auth.signup», но не нашел конкретного решения.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 217
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Потратив столько часов, наконец написал эти тестовые примеры для вышеуказанного вопроса.

import { register } from "./auth.action";
import mockData from "./__mocks__/mockData";
import { Auth } from "./__mocks__/aws-amplify";
import history from "../utils/history.helper";
jest.mock("./auth.action", () => {
  return { register: jest.fn(() => mockPromise) };
});

jest.mock("aws-amplify");
describe("Signup action", () => {
  beforeEach(() => {
    register.mockClear();
  });
  test("Check register function have been called or not", async () => {
    register();
    expect(register).toHaveBeenCalled();
    expect(register).toMatchSnapshot();
  });

  test("Check args passed in function are valid or not", () => {
    expect(mockData.signupData).not.toBeNull();
    expect(mockData.signupData).toMatchObject({
      username: "[email protected]",
    });
    expect(mockData.signupData).toHaveProperty("company_name", "Ces");
    expect(mockData.signupData).toHaveProperty("country_name", "India");
    expect(mockData.signupData).toHaveProperty("designation", "SD");
    expect(mockData.signupData).toHaveProperty("password", "Password@123");

    expect(mockData.signupData).toMatchSnapshot();
  });

  test("Amplify auth is called or not", () => {
    Auth.signUp(mockData.signupData);
    expect(Auth.signUp).toHaveBeenCalled();
    expect(Auth.signUp).toMatchSnapshot();
  });

  test("history is pushed", () => {
    const pushSpy = jest.spyOn(history, "push");

    pushSpy("/login");

    expect(pushSpy).toHaveBeenCalled();
    expect(pushSpy.mock.calls[0][0]).toEqual("/login");

  });
});

Я написал тестовый пример аутентификации с усилением в фиктивном файле.

    // in __mocks__/aws-amplify.js
export const Auth = {
  currentSession: jest.fn(() => Promise.resolve()),
  signUp: jest.fn(() => Promise.resolve()),
  signIn: jest.fn(() => Promise.resolve()),
};

Надеюсь, это поможет и другим, кто ищет то же самое.

Другие вопросы по теме