使用Formik和Jest / Enzyme對文本字段進行單元測試

Question

我對單元測試文本字段中的更改完全迷失了。 我正在使用玩笑+酶來更改文本字段，但policyEffectiveField.props（）。value始終為null。

我嘗試進行模擬，但是使用了formik doc中的 “ change”和“ click”。

policyEffectiveField.simulate('change', {
    // you must add this next line as (Formik calls e.persist() internally)
    persist: () => {},
    // simulate changing e.target.name and e.target.value
    target: {
      name: 'policyEffectiveDate',
      value: "07/30/2019",
    },
  });
  expect(policyEffectiveField.props().value).toEqual(now);

但是policyEffectiveField.props（）。value為null

it('change policyEffectiveDate textfield ', () => {
  let now = moment().format('L');
  var mountRTI = mount(<TestRTI forms={[policyEffectiveDate]} />);
  var policyEffectiveField = mountRTI.find(TextField).find('input').find({ name: 'policyEffectiveDate' });
  policyEffectiveField.simulate('change', {
    // you must add this next line as (Formik calls e.persist() internally)
    persist: () => {},
    // simulate changing e.target.name and e.target.value
    target: {
      name: 'policyEffectiveDate',
      value: "07/29/2019",
    },
  });
  expect(policyEffectiveField.props().value).toEqual(now);
});

我期望Expect（policyEffectiveField.props（）。value）.toEqual（now）; 沒錯，但是出現以下錯誤

change policyEffectiveDate textfield

expect(received).toEqual(expected) // deep equality

Expected: "07/30/2019"
Received: undefined

  48 |     },
  49 |   });
> 50 |   expect(policyEffectiveField.props().value).toEqual(now);

Answer 1

Formik在內部使用setState。 因此，在您調用simulate（）之后，您需要等待一個promise（並使您的it回調異步），例如：

it("test", async () => {
      // simulate call here
      await new Promise(resolve => {
        setTimeout(resolve);
      });
      // assertion/other code here
})