Wednesday, 3 March 2021

Dependency Formik form Unit testing

I want to write the unit test for React formik form fields.

Related packages versions are bellow

React version ^16.9.0

Formik version ^1.5.8

Jest version ^23.0.0

jest-enzyme version ^7.1.2

Enzyme version ^3.11.0

Component.js

const formInitialValues = {
  frequency: null,
  weekType: null'
};

<Formik
  enableReinitialize
  initialValues={formInitialValues}
  onSubmit={(values, actions) => {
    console.log(values);
  }}
  validate={values => {
    // validation here
  }}
  render={props => (
    <Form
       onSubmit={props.handleSubmit}
       data-test="smart-cabinet-add-doc-form"
    >
      <Row>
        <div className="form-group col-md-6 ">
          <label htmlFor="frequency" data-test="frequency-label">
            Frequency
          </label>

          <CustomSelect
            id="frequency"
            name="frequency"
            className="form-control col-sm-10"
            options={SmartCabinetHelper.ADD_DOCUMENT_FREQUENCY_OPTIONS}
            onChange={(name, value) => {
              setFieldValue(name, value);
              formatDueDate(values);
            }}
            onBlur={setFieldTouched}
            placeholder="Select Frequency"
            setFieldValue={setFieldValue}
            value={values.frequency}
            isDisabled={isNull(values.uploadedBy)}
            data-test="frequency-field"
          />
          <div className="error-message">
            <ErrorMessage name="frequency" />
          </div>
        </div>
      </Row>

      {!isNull(values.frequency) && (
        <Row>
          <div className="form-group col-md-12 ">
            <CustomSelect
              id="weekType"
              name="weekType"
              className="form-control"
              options={QuickLinkModalHelper.WEEKS_TYPES.slice(0, -1)}
              onChange={(name, value) => {
                setFieldValue(name, value);
                formatDueDate(values);
              }}
              onBlur={setFieldTouched}
              isSearchable={false}
              placeholder=""
              setFieldValue={setFieldValue}
              value={values.weekType}
              data-test="weekType-field"
            />
          </div>
        </Row>
      )}
    </form>
  )}
/>

In the componentTest.js file I can test the frequency element, but I can't test the weekType element because that element depends on the frequency value. {!isNull(values.frequency) && (

When the unit test runs, according to the formInitialValues, of formik form frequency value is Null. So I can't check weekType, It occurs an error. Test fails.

ComponentTest.js

const setup = () => {
  return mount(
    <Component />
  );
};

describe('Test form elements', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = setup(defaultProps);
  });

  test('test frequency field', () => {
    const frequencyField = findByTestAttr(
      wrapper,
      'frequency-field'
    );

    expect(frequencyField.length).toBe(1); // This test passes
  });

  test('test weekType field', () => {
    const weekTypeField = findByTestAttr(
      wrapper,
      'weekType-field'
    );

    expect(weekTypeField.length).toBe(1); // This test fails, because frequency value = null
  });
});

I tried too many ways to figure that. But couldn't. Is there any way to change formInitialValues in the testing file? Thank you.



from Dependency Formik form Unit testing

No comments:

Post a Comment