Radio Group element to trigger change event in ReactTestingLib

[lucksp]

Testing with UI libraries can be a challenge. I am using React-Testing-Library and cannot figure out how to explicitly trigger the change event of a Radio Group, with AntDesign (v3) & React Testing Library.

The <label> element that is created from the <Form.Item> wrapper does not seem to adhere to the same standards that RTL is expecting. Here is the error:

Found a label with the text of: Division, however the element associated with this label (

) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a

, you can use aria-label or aria-labelledby instead.

So using getByLabelText and triggering a change event is not possible. Also the AntDesign created radio element: <input class="ant-radio-button-input" type="radio" value="CA" />, does not change the attribute to checked="true" so I cannot seem to select this element and trigger a change on that attribute in a way that AntDesign will pick it up.

How can I trigger the change for this Radio Group?

CodeSandbox: https://codesandbox.io/s/small-moon-irpib?file=/src/__tests__/Form.test.js

[lucksp]

welp,

const item = await getByRole('radio', {
      name: 'BA',
    });
    fireEvent.click(item);