最近写单元测试，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 的方法去提交表单
