Writing jest tests for antd FormItem

Viewed 598

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?

0 Answers
Related