1

I have a jest test to test a custom component containing the form.item from antd. I've trimmed everything down to clean out-of-the-box code to ensure this is not in my customizations.

My test file contains a defined form like this:

const TestForm = () => {
    return (
        <Form id='frm_test' name='frm_test'>
            <Form.Item data-testid="test" label='email' name='email' rules={[{ type: 'email', message: 'test' }]}>
                <Input />
            </Form.Item>
        </Form>
    );
};

Next I have a test like this:

it('Should should validate email input', () => {
    const { getByLabelText, getByTestId } = render(<TestForm />);

    screen.debug(getByTestId('test'))
    userEvent.type(getByLabelText('email'), 'T');
    screen.debug(getByTestId('test'));
});

When I now run the test, I expect that the generated form.item will have the error message bellow the input field if you look at the debug information. This happens when you manually type something in such a situation, so I expect it to happen in the test as well. However this doesn't happen as you can see in the output from the test debug.

What I do see is that the form item is having the class ant-form-item-is-validating. I expect this to be ant-form-item-has-error (or something like that). It's as if the validation 'hangs' somewhere.

The debug information is:

<div
      class="ant-row ant-form-item ant-form-item-is-validating"
      data-testid="test"
    >
      <div
        class="ant-col ant-form-item-label"
      >
        <label
          class=""
          for="frm_test_email"
          title="email"
        >
          email
        </label>
      </div>
      <div
        class="ant-col ant-form-item-control"
      >
        <div
          class="ant-form-item-control-input"
        >
          <div
            class="ant-form-item-control-input-content"
          >
            <input
              class="ant-input ant-input-sm"
              id="frm_test_email"
              type="text"
              value="T"
            />
          </div>
        </div>
      </div>
    </div>

2 Answers 2

0

Okay so I saw that the validation was actually also doing a log in the console. With some messing around, I can actually do a test to see if the message appears using spy. Right now I did it with this code :

const oSpy = jest.spyOn(console, 'warn').mockImplementation();
userEvent.type(getByLabelText('email'), 'T');
expect(oSpy).toHaveBeenCalledTimes(1);

Now the above example won't reflect my message, but will work. I adjusted my custom component to contain some console.warn('some message') and then the spy can get it.

Not exactly what I wanted though. Also, I'll end up having console... in my code. I certainly don't want that when I build it. So I'll remove that with uglyfyjs.

1
  • Found a better solution to this? I am in same situation.
    – ionuttibi
    Mar 24, 2022 at 12:57
0

Spend 2 days on this but i found an answer.

You can wait for the validation to end by accessing the validateFields method as follows:

const form = wrapper.find(Form);
        form.props().form.setFieldsValue({
            email: 'invlid email'
        });
        return form.props().form.validateFields().catch(err => {
            expect(!!err.errorFields).toBe(true);
        })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.