Реакция шутливого тестирования наSubmit путем симуляции не работает - PullRequest
Новая
       9

Реакция шутливого тестирования наSubmit путем симуляции не работает

0 голосов
/ 12 апреля 2020

это моя первая неделя, связанная с тестированием, и я запутался, я пытаюсь протестировать компонент SignIn, я протестировал снимок, чтобы убедиться, что поведение макета не меняется, затем я хочу протестировать поведение отправки, вот мой код:

signIn-component.jsx 

import React, { useState } from 'react';

import FormInput from '../form-input/form-input.component';
import CustomButton from '../custom-button/custom-button.component';
import { connect } from 'react-redux';

import {
  googleSignInStart,
  emailSignInStart,
} from '../../redux/user/user.actions';
import './sign-in.styles.scss';

export const SignIn = ({ emailSignInStart, googleSignInStart }) => {
  const [userCredentials, setCredentials] = React.useState({
    email: '',
    password: '',
  });
  const { email, password } = userCredentials;

  const handleSubmit = async (event) => {
    event.preventDefault();
    emailSignInStart(email, password);
  };

  const handleChange = (event) => {
    const { value, name } = event.target;
    setCredentials({ ...userCredentials, [name]: value });
  };

  return (
    <div className="sign-in">
      <h2>I already have an account</h2>
      <span>Sign in with your email and password</span>

      <form onSubmit={handleSubmit}>
        <FormInput
          name="email"
          type="email"
          handleChange={handleChange}
          value={email}
          label="email"
          required
        />
        <FormInput
          name="password"
          type="password"
          value={password}
          handleChange={handleChange}
          label="password"
          required
        />
        <div className="buttons">
          <CustomButton type="submit"> Sign in </CustomButton>
          <CustomButton
            type="button"
            onClick={googleSignInStart}
            isGoogleSignIn
          >
            Sign in with Google
          </CustomButton>
        </div>
      </form>
    </div>
  );
};

const mapDispatchToProps = (dispatch) => ({
  googleSignInStart: () => dispatch(googleSignInStart()),
  emailSignInStart: (email, password) =>
    dispatch(emailSignInStart({ email, password })),
});

export default connect(null, mapDispatchToProps)(SignIn);

sign.test. js

import { shallow , mount } from 'enzyme';
import React from 'react';
import toJson from 'enzyme-to-json';
import { SignIn } from '../sign-in.component';

describe('Sign In component', () => {

    let wrapper;
    const mockemailSignInStart = jest.fn();
    const mockgoogleSignInStart = jest.fn();
    const mockHandleSubmit = jest.fn();

    beforeEach(() => {
          wrapper = shallow(<SignIn 
            emailSignInStart={mockemailSignInStart} 
            googleSignInStart={mockgoogleSignInStart}/>
        );
    });

    it('expect to render signIn component', () => {
        expect(toJson(wrapper)).toMatchSnapshot();
    });

    it('expect call fn on submit', () => {
        wrapper.find('form').simulate('submit');
        expect(mockHandleSubmit).toBeCalled();
    });
});

Я пробовал монтировать и рендерить, но всегда ожидаю toBeCalled всегда возвращаю 0

1 Ответ

0 голосов
/ 12 апреля 2020

Я вижу 2 проблемы в вашем коде:

1) Я думаю это: 

expect(mockHandleSubmit).toBeCalled();

на самом деле должно быть 

expect(mockemailSignInStart).toBeCalled();

, потому что handleSubmit отправляет emailSignInStart, который вы издеваетесь с googleSignInStart.

2) Вы должны передать некоторый аргумент вашему simulate('submit') или handleSubmit выдаст ошибку при вызове event.preventDefault();. Например, вы можете просто использовать: 

wrapper.find("form").simulate("submit", { preventDefault: jest.fn() });
...