Как проверить функцию и внутреннее утверждение после отправки обработчика формы в реакции jest / энзима - PullRequest
Новая
       6

Как проверить функцию и внутреннее утверждение после отправки обработчика формы в реакции jest / энзима

4 голосов
/ 16 апреля 2020

Я работаю с функциональным компонентом React, который имеет форму. Я создал обработчик форм, который запускает функции onSuccess и onFailure, onSuccess, закрывающие модель.

Теперь Мне нужно написать тест для onFailure, onSuccess функции и для модального оператора закрытия.

Код компонента: 

export const TestUpdateModal = function( props ) {

  const onSuccess = () => {
    MiModal.close( 'AccUpdate' );
  }

  const onFailure = ( message ) => {
    // show error message
  }

  const { handleSubmit } = updateFormHandler({
    onSuccess: onSuccess,
    onFailure: onFailure
  });

  return <form onSubmit={ e => handleSubmit( e ) }/>
}  

----------------------------

updateFormHandler is

    import { useMutation } from '@apollo/react-hooks';
    import UpdateProfile_MUTATION from '../../../graphql/mutations/updateProfile/updateProfile';

    export const updateFormHandler = ( { onSuccess, onFailure } ) => {

    const onCompleted =  response => {
      const {
        UpdateProfile: {
          meta: {
            status
          },
          messages
        }
      } = response;

      const isSuccess = status === 'success';

      if( isSuccess ){
        onSuccess();
      }
      else {
        onFailure( {
          type: 'error',
          messages: messages
        } );
      }
    }

    const onError = ( response ) => {

      const { message } = response;
      message &&
      onFailure( {
        type: 'error',
        messages: [{
          description: response.message
        }]
      } );
    }

    const [updateProfile] = useMutation( UpdateProfile_MUTATION, {
      onCompleted: onCompleted,
      onError: onError
    } );

    const handleSubmit = ( e, digitalId, version ) => {
      e.preventDefault();

      updateProfile( {
        variables: {
          emailAddress: e.target.emailId.value,
          password: e.target.newPasswordId.value,
          firstName: e.target.firstName.value,
          lastName: e.target.lastName.value,
          dateOfBirth: e.target.birthday?.value,
          version: version,
          digitalId: digitalId
        }
      } );

    }

    return {
      handleSubmit
    };

    }

Ответы [ 2 ]

2 голосов
/ 24 апреля 2020

Если вам нужно протестировать onSuccess и onFailure, вам не нужно использовать Фермент или включать форму в тест.

Экспорт onSuccess и onFailure функции: 

export const TestUpdateModal = function( props ) {

    const { handleSubmit } = updateFormHandler({
        onSuccess: onSuccess,
        onFailure: onFailure
    });

    return <form onSubmit={ e => handleSubmit( e ) }/>
}

export const onSuccess = () => {
    MiModal.close( 'AccUpdate' );
}

export const onFailure = ( message ) => {
    // show error message
}

А затем протестируйте их самостоятельно: 

import {onFailure, onSuccess} from './TestUpdateModal';
import {MiModal} from './MiModal';


describe('TestUpdateModal', () => {
    it('Success called', () => {
        onSuccess();
        expect(MiModal.close).toHaveBeenCalledWith('AccUpdate');
    });

    it('Failure called', () => {
        onFailure('Error');
        // Here test on failure
        // (the example code does nothing)
    });
});
1 голос
/ 21 апреля 2020

Вы пытались издеваться useMutation? Похоже, что путем насмешки useMutation и последующей замены вашей собственной реализации, которая возвращает все, что вы хотите в своем наборе тестов, вы могли бы утверждать определенные типы сценариев ios.

Я бы предположил, что вы можете передать в mock функции для успеха / неудачи затем макетируют useMutation для выполнения различных действий, таких как запуск этих фиктивных функций или возврат определенных данных.

Это весь псевдокод, который я не тестировал, но, возможно, он укажет вам правильное направление: 

import { useMutation } from "@apollo/react-hooks";

jest.mock("@apollo/react-hooks");

describe("something", () => {
  test("should work", () => {
    const successMock = jest.fn();
    const failureMock = jest.fn();
    const updateProfileMock = jest.fn();
    // TODO: change the implementation to trigger things like
    // firing success or error
    useMutation.mockImplementationOnce(updateProfileMock);

    const { handleSubmit } = updateFormHandler({
      onSuccess: successMock,
      onFailure: failureMock,
    });
    handleSubmit(
      // Fake event data which you could use to assert against
      {
        target: {
          emailId: "some-id",
          newPasswordId: "some-pw",
          firstName: "first-name",
          lastName: "last-name",
          birthday: "birthday",
        },
      },
      "digital-id",
      "version-here"
    );

    expect(updateProfileMock).toBeCalled();
    // TODO: assert that updateProfileMock was called with the right data
  });
});

Вы также можете смоделировать функцию updateFormHandler в ваших компонентах. таким же образом и передайте имитаторы и данные для утверждения.

Надеюсь, это поможет ??

...