I am trying to write jest tests for my component which uses antd that uses Form. Pasting a snippet of the code.
Component.tsx:
render() {
const { Option } = Select;
return (
<div>
<Form
ref={this.formRef}
{...formItemLayout}
onFinish={(values) => {this.props.onSubmit(values)}
>
<Form.Item
name="foo"
label="Foo"
hasFeedback
rules={[
{ required: true, message: 'Foo is required' },
() => ({
validator(rule, value) {
if(!isUniqueFoo(value)) {
return Promise.reject(new Error('wrong foo'));
}
if (value.length > 10) {
return Promise.reject(new Error('too many characters'));
}
return Promise.reject(new Error('something went wrong')));
}
})
]}
>
<Input type="text" />
</Form.Item>
<Form.Item
name="bar"
label="Bar"
hasFeedback
rules={[
{ required: true, message: 'bar is required' },
() => ({
validator(rule, value) {
if (isValidInput(value)) {
return Promise.resolve();
}
return Promise.reject(new Error('wrong value')));
}
})
]}
>
<Input />
</Form.Item>
<Form.Item
name="baz"
label="Baz"
>
<Select
showSearch
className="select-dropdown"
optionFilterProp="children"
onChange={this.onChange}
>
{data.map((d: Data) => (
<Option key={d.id} value={d.id}>{d.name}</Option>
))
}
</Select>
</Form.Item>
</>
)}
</Form>
</div>
}
Trying to write Jest tests for this above component. This is a test that works:
it('test', () => {
const onSubmit = jest.fn();
const wrapper = shallow(<Component {...defaultProps} onSubmit={onSubmit} />);
wrapper.find('ForwardRef(InternalForm)').props().onFinish(values);
expect(onSubmit).toHaveBeenCalledWith({
...defaultProps.baz,
// Changed items.
foo: 'test',
bar: 'other test'
});
});
While the above test works, I would like to test other things like validations. None of these code snippets work. I am trying to test whether the field 'Foo' is entered and the length of text is < 10 chars, and is validated, etc.
console.log("test1", wrapper.find('ForwardRef(InternalForm)').shallow().find('Input'));
console.log("test2", wrapper.find('ForwardRef(InternalForm)').find('Input'));
console.log("test3", wrapper.find('Input'));
Another thing that irks me is having to use wrapper.find('ForwardRef(InternalForm)') instead of wrapper.find('Form')
Any thoughts?