"@testing-library/jest-dom": "^6.6.3",
 "@testing-library/react": "11.2.6",
 "@testing-library/react-hooks": "5.1.2",
 "@testing-library/user-event": "^14.5.2",
 "vitest": "^3.0.5",
 "react": "17.0.2",
 "react-dom": "17.0.2",

node: v20.18.1

Relevant code or config:

<input type="search" class="input" id="artikeltyp.geraetedatenKommunikationsGeraeteKomponententypen[1].anschluss" disabled="" style="anchor-name: --useCSSAnchor-10;" value="" placeholder="Klemmenblock">

What you did:

expect(
component.getByPlaceholderText('Klemmenblock'),
).toBeVisible();

What happened:

SyntaxError: 'input#artikeltyp.geraetedatenKommunikationsGeraeteKomponententypen[1].anschluss.input :focus-visible' is not a valid selector

Reproduction:

Problem description:

The id selector square brackets are not escaped by testing library.

Suggested solution:

The id selector square brackets should be escaped by testing library.