queryByTestId, getByTestId use partial case-insensitive text match by default, which is unexpected

[sompylasar]

• dom-testing-library version: 1.1.0
• node version: N/A
• npm (or yarn) version: N/A

Relevant code or config

import { getByTestId } from "dom-testing-library";

document.getElementById("test").innerHTML = `
<div data-testid="supertest-123"></div>
`;

document.getElementById("output").innerHTML = `
${getByTestId(document, "tEsT")
  .outerHTML.replace(/</g, "&lt;")
  .replace(/>/g, "&gt;")}
`;

What you did:

1. Added an element with data-testid="supertest-123" to an empty DOM.
2. Queried the DOM via getByTestId by string "tEsT".

What happened:

The element with data-testid="supertest-123" was found.

Reproduction repository:

https://codesandbox.io/s/pwrpl1yy9x?module=%2Fsrc%2Findex.js

Problem description:

The current behavior is unexpected, the identifiers aren't supposed to be matched partially and case-insensitively.

Suggested solution:

Use case-sensitive full-string match in queryByTestId, getByTestId.

[kentcdodds]

I know this is how it works and added it intentionally. Perhaps it is unexpected because an ID is supposed to be unique and it could cause problems if a partially matched item is found before the fully matched item.

For that reason I'd be willing to call this a bug and accept a PR to fix it.

[antsmartian]

I can pick this up provided others didn't picked it ;)

[kentcdodds]

🎉 This issue has been resolved in version 1.10.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀