I am trying to get an element with RTL ( React testing library ) getByRole method.

My observation:

It works when I add characters ( 12+ ).

Ex:

// Form

<Col xs={24} md={6}>
  <StyledLabel htmlFor="full-name-member">
    <LargeFont>Member Name_</LargeFont> // this line
  </StyledLabel>
  <TextBox
    name="fullName"
    placeholder="Full Name"
    required={false}
    rule="text"
    maxLength={100}
    id="full-name-member"
  />
</Col>;

screen.getByRole('textbox', { name: 'Member Name' });

Notice the extra _ underscore. It works when I add one more character than actually required.

I have counted the length for it. It's 12+ for working properly where If I remove an extra character, it doesn't work as it should.

Ex:

// Form

<Col xs={24} md={6}>
  <StyledLabel htmlFor="full-name-member">
    <LargeFont>Member Name</LargeFont> // this line
  </StyledLabel>
  <TextBox
    name="fullName"
    placeholder="Full Name"
    required={false}
    rule="text"
    maxLength={100}
    id="full-name-member"
  />
</Col>;

screen.getByRole('textbox', { name: 'Member Name' });

Explanation:

• Styled is just a prefix for styled-component wrapped components.
• Col & TextBox components belongs from ant-design.
• LargeFont is a wrapper around div element with fixed css.

What could be the reason for this weird behaviour?