使用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
})