Jest+enzyme 测试antd form

最近写单元测试，antd 的form 表单遇到了一些坑点线总结如下：

const wrapper = mount(<EventRegistrationForm/>);

input 框填入字符串值

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

则在input 中填入值如：

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

input 框中填整数值

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

对于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');

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

表单的提交

 <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 的方法去提交表单

Jest+enzyme 测试antd form

猜你喜欢