Блог

Я пытаюсь написать тесты jest для своего компонента, который использует antd, который использует форму. Вставка фрагмента кода.

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

Пытаюсь написать Jest-тесты для этого вышеуказанного компонента.
Это тест, который работает:

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

Хотя приведенный выше тест работает, я хотел бы протестировать другие вещи, такие как проверки. Ни один из этих фрагментов кода не работает. Я пытаюсь проверить, введено ли поле ‘Foo’, а длина текста составляет <10 символов и проверяется и т. Д.

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

 

Еще одна вещь, которая меня раздражает, — это необходимость использовать wrapper.find(‘forwardRef(InternalForm)’) вместо wrapper.find(‘Form’)

Есть мысли?