Testing Formik with Jest and Enzyme

index.js

import './index.css';
import React from 'react';
import { connect } from 'react-redux';
import { css } from '@emotion/core';
import SyncLoader from 'react-spinners/SyncLoader';
import { Formik, Form, Field } from 'formik';
import { authAction } from '../../store/modules/auth/actions';
import logo from '../../assets/images/logo.png';

import SignupSchema from './schema';

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

export const SignupForm = ({
  error,
  status,
  signUp,
  history,
  location,
  isAuthenticated
}) => (
  <div className="w-11/12 md:w-9/12 lg:w-7/12 mx-auto m-16 rounded-lg flex items-stretch bg-red-400 h-100">
    <div className="md:flex max-w-lg w-7/12 bg-color height items-center signup-card hidden rounded-l-lg ">
      <div className=" pl-8 font-bold text-left text-white text-2xl">
        <div>Welcome back,</div>
        <div>Signup to share,</div>
        <div>recommend and bookmark</div>
      </div>
    </div>
    <div className="w-full lg:w-7/12 p-8 bg-white rounded-r-lg">
      <div className="w-full flex flex-col items-center mx-auto">
        <img src={logo} alt="errorswag logo" className="h-12 mb-4" />

        <Formik
          initialValues={{
            email: '',
            username: '',
            password: '',
            confirmPassword: ''
          }}
          validationSchema={SignupSchema}
          onSubmit={async (values, { setSubmitting }) => {
            setSubmitting(true);
            await signUp({ userData: values, history, url: location.url });
            if (status !== 'authenticationLoading') {
              setSubmitting(false);
            }
          }}
        >
          {({ errors, touched, isSubmitting }) => (
            <div className="flex mx-auto flex-col w-full text-center">
              <div className="sweet-loading flex">
                <SyncLoader
                  css={override}
                  sizeUnit="em"
                  size={0.6}
                  color="#f00"
                  loading={isSubmitting}
                />
              </div>
              <Form className="">
                <div className="mb-4 w-100 text-left">
                  <div>Email:</div>
                  <Field
                    name="email"
                    placeholder="Email Address"
                    type="email"
                    className={`${'w-full h-12 pl-6 border border-gray-400 text-sm bg-gray-300 rounded'} ${
                      errors.email ? 'border-red-500' : ''
                    }`}
                  />
                  {errors.email && touched.email ? (
                    <div className="text-danger text-xs">{errors.email}</div>
                  ) : null}
                </div>

                <div className="mb-4 w-100 text-left">
                  <div>Username:</div>
                  <Field
                    name="username"
                    placeholder="Username"
                    type="text"
                    className={`${'w-full h-10 p-2 pl-6 border border-gray-400 text-sm bg-gray-300 text-red-black rounded'} ${
                      errors.username ? 'border-red-500' : ''
                    }`}
                  />
                  {errors.username && touched.username ? (
                    <div className="text-danger text-xs">{errors.username}</div>
                  ) : null}
                </div>

                <div className="mb-4 w-100 text-left">
                  <div>Password:</div>
                  <Field
                    name="password"
                    placeholder="Password"
                    type="password"
                    className={`${'w-full h-10 p-2 pl-6 border border-gray-400 text-sm bg-gray-300 text-red-black rounded'} ${
                      errors.password ? 'border-red-500' : ''
                    }`}
                  />
                  {errors.password && touched.password ? (
                    <div className="text-danger text-xs">{errors.password}</div>
                  ) : null}
                </div>

                <div className="mb-8 w-100 text-left">
                  <div>Confirm Password:</div>
                  <Field
                    name="confirmPassword"
                    placeholder="Password"
                    type="password"
                    className={`${'w-full h-10 p-2 pl-6 border border-gray-400 text-sm bg-gray-300 text-red-black rounded'} ${
                      errors.confirmPassword ? 'border-red-500' : ''
                    }`}
                  />
                  {errors.confirmPassword && touched.confirmPassword ? (
                    <div className="text-xs text-danger">
                      {errors.confirmPassword}
                    </div>
                  ) : null}
                </div>

                <div className="w-100 text-left">
                  <button
                    type="submit"
                    name="submitForm"
                    className={`${'w-full h-12 p-2 font-bold border text-white text-sm rounded'} ${
                      isSubmitting ? 'bg-teal-200' : 'bg-teal-500'
                    }`}
                  >
                    {isSubmitting ? 'SIGNING UP' : 'SIGN UP'}
                  </button>

                  <div className="w-100 text-center mb-2">
                    <button
                      type="submit"
                      className="mt-2 w-auto p-2 self-center button hover:text-indigo-700 text-center text-sm"
                    >
                      Forgot Password?
                    </button>
                  </div>
                </div>
              </Form>
            </div>
          )}
        </Formik>
      </div>
    </div>
  </div>
);

const mapStateToProps = state => {
  return {
    status: state.status
  };
};

const mapDispatchToProps = dispatch => ({
  signUp: ({ userData, history }) => dispatch(authAction({ userData, history }))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignupForm);

index.spec.js

import React from 'react';
import { mount, shallow } from 'enzyme';
import { Formik } from 'formik';
import store from '../../store';
import MySignupForm, { SignupForm } from './index';

describe('SignupForm', () => {
  test('should update email field on change', () => {
    const tree = mount(<MySignupForm store={store} />);
    const emailInput = tree.find("input[name='email']");
    emailInput.simulate('change', {
      persist: () => {},
      target: {
        name: 'email',
        value: '[email protected]'
      }
    });
    expect(emailInput.html()).toMatch('[email protected]');
  });

  test('should update username field on change', () => {
    const tree = mount(<MySignupForm store={store} />);

    const usernameInput = tree.find("input[name='username']");

    usernameInput.simulate('change', {
      persist: () => {},
      target: {
        name: 'username',
        value: 'newName'
      }
    });

    expect(usernameInput.html()).toMatch('newName');
  });

  test('should update password field on change', () => {
    const tree = mount(<MySignupForm store={store} />);

    const passwordInput = tree.find("input[name='password']");

    passwordInput.simulate('change', {
      persist: () => {},
      target: {
        name: 'password',
        value: 'Password2019#'
      }
    });

    expect(passwordInput.html()).toMatch('Password2019#');
  });

  test('should submit a valid form', () => {
    const tree = shallow(<MySignupForm store={store} />);

    const signupForm = (props = { errors: {} }) =>
      tree
        .find(SignupForm)
        .dive()
        .find(Formik)
        .renderProp('children')(props);

    // expect
    const signingUpForm = signupForm({ errors: {}, isSubmitting: true });
    expect(signingUpForm.html()).toMatch(/SIGNING UP/);
  });

  test('should return error for invalid email address', () => {
    const tree = shallow(<MySignupForm store={store} />);

    const signupForm = (props = { errors: {} }) =>
      tree
        .find(SignupForm)
        .dive()
        .find(Formik)
        .renderProp('children')(props);

    const formWithInvalidEmailErrors = signupForm({
      errors: {
        email: 'Invalid Email Address'
      },
      touched: { email: true },
      isSubmitting: false
    });

    expect(formWithInvalidEmailErrors.html()).toMatch(/Invalid Email Address/);
  });

  test('should return error if the username is not complete', () => {
    const tree = shallow(<MySignupForm store={store} />);

    const signupForm = (props = { errors: {} }) =>
      tree
        .find(SignupForm)
        .dive()
        .find(Formik)
        .renderProp('children')(props);

    const formWithInvalidUsernamelErrors = signupForm({
      errors: {
        username: 'minumum of 6 characters'
      },
      touched: { username: true },
      isSubmitting: false
    });

    expect(formWithInvalidUsernamelErrors.html()).toMatch(
      /minumum of 6 characters/
    );
  });

  test('should return error if there is password validation error', () => {
    const tree = shallow(<MySignupForm store={store} />);

    const signupForm = (props = { errors: {} }) =>
      tree
        .find(SignupForm)
        .dive()
        .find(Formik)
        .renderProp('children')(props);

    const formWithPAsswordErrors = signupForm({
      errors: {
        password:
          'Password must contain atleast one special character and uppercase letter'
      },
      touched: { password: true },
      isSubmitting: false
    });
    expect(formWithPAsswordErrors.html()).toMatch(
      /Password must contain atleast one special character and uppercase letter/
    );
  });
});

schema.js

import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  email: Yup.string()
    .trim()
    .email('Invalid email address')
    .required('Required'),
  username: Yup.string()
    .required('Required')
    .trim(),
  password: Yup.string()
    .trim()
    .min(6, 'minumum of 6 characters')
    .matches(
      /^(?=.{10,}$)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*\W).*$/,
      'Password must contain atleast one special character and uppercase letter'
    )
    .required('Required'),
  confirmPassword: Yup.string()
    .trim()
    .oneOf([Yup.ref('password'), null], "Passwords don't match!")
    .required('Required')
});

export default SignupSchema;

what is MySignupForm actually can anyone explain?? where is it ??
const tree = shallow();

Can you help me in explaining what is signup Form.

SignupForm is the exact component being exported on line 18 of the index.js file without mapping to redux's state, while MySignupForm is the component mapped with the redux state, as exported on line 167 of the index.js file.