最近寫單元測試，antd 的form 表單遇到了一些坑點線總結(jié)如下：

const wrapper = mount(<EventRegistrationForm/>);

1. input 框填入字符串值

<Form.Item label="name">
            {getFieldDecorator('name', {
              rules: [{
                required: true
              }],
            })(<Input />)}
 </Form.Item>

則在input 中填入值如：

  wrapper.find('input#name').simulate('change', { target: { value: 'test' } });

2. input 框中填整數(shù)值

 <Form.Item label="phoneNumber">
            {getFieldDecorator('phoneNumber', 
              rules: [{
                message: t('eventForm.errorMessage.phoneNumberInvalid'),
                pattern: new RegExp('^[0-9]{10}$')
              }],
            })(
              <Input/>
            )}
 </Form.Item>

在input 中填入值如下：

wrapper.find('input#phoneNumber').prop('onChange')
({ currentTarget: { value: 1882925032 } });

3. 對于select 的選擇

<Form.Item label="budget">
            {getFieldDecorator('budget', {
              rules: [{
                required: true,
              }],
            })(
              <Select placeholder="">
                <Select.Option value="A">A</Select.Option>
                <Select.Option value="B">B</Select.Option>
                <Select.Option value="C">C</Select.Option>
              </Select>
            )}
 </Form.Item>

測試代碼如下去模擬點擊事件：

wrapper.find('#budget .ant-select-selection__rendered').simulate('click');
wrapper.find('.ant-select-dropdown-menu li').at(2).simulate('click');

4. checkBox的多選

 <Form.Item label="purchaseObjective">
            {getFieldDecorator('purchaseObjective', {
              rules: [{
                required: true,
              }],
            })(
              <Checkbox.Group>
                <Checkbox value="A">A</Checkbox>
                <Checkbox value="B">B</Checkbox>
                <Checkbox value="C">C</Checkbox>
              </Checkbox.Group>
            )}
  </Form.Item>

測試代碼如下：

 wrapper.find('#purchaseObjective input[value="A"]').simulate('change', { target: { value: 'A' } });

5. 表單的提交

 <Form.Item>
     <Button type="primary" htmlType="submit" className="btn-submit">
         {isShowLoading && <Icon type="loading" theme="outlined" />}
         {t('eventForm.button.submit')}
     </Button>
 </Form.Item>

測試代碼：

wrapper.find('form').simulate('submit');

不能通過找到button 元素然后click 的方法去提交表單