依赖Formik表单单元测试

Question

我想为 React formik 表单字段编写单元测试。

相关包版本如下

React 版本 ^16.9.0

Formik 版本 ^1.5.8

笑话版 ^23.0.0

jest-enzyme 版本 ^7.1.2

酶版 ^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>
  )}
/>

在 componentTest.js 文件中，我可以测试 frequency 元素，但我无法测试 weekType 元素，因为该元素取决于 frequency 值。 {!isNull(values.frequency) && (

单元测试运行时，根据formInitialValues，formik形式frequency的值为Null。所以我无法检查weekType，它发生了错误。测试失败。

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
  });
});

我尝试了太多方法来弄清楚这一点。但不能。有什么方法可以更改测试文件中的formInitialValues？谢谢。

Answer 1

想了很多办法，终于找到了办法

在测试文件中使用模拟 formik 表单，除了使用 react-testing 库导入 component.js

component.test.js

    describe('Test form elements', () => {
      it('test frequency field', async () => {
      const { getByText, getByTestId } = render(
        <Formik 
          initialValues={{
            frequency: null,
            weekType: null' }}
          onSubmit={mock}
        >
          <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"
                 ...
               />
               <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"
                   ...
                   data-test="weekType-field"
                 />
               </div>
             </Row>
           )}
          </form>
        </Formik>
      );

      const weekTypeField = await waitForElement(() => getByTestId('weekType-field'));

      expect(weekTypeField.length).toBe(1);
    });
  });

任何建议... 谢谢。