React-Testing-Library - MatchingFunction represented as text

Question

React-Testing-Library - MatchingFunction represented as text

screen.getByText(match: Matcher) requires a Matcher that can be of type string, RegExp, or MatcherFunction. If using the latter, it should be of the form

(content: string, element: HTMLElement) => boolean

.

Expectation:

screen.getByText((content, element) => element.className.includes("my-class") && content.includes("text to search for"));

involves searching through the DOM for an element with the class name my-class containing the text text to search for

Actual: TestingLibraryElementError: The element with the text was not found: element.className.includes("my-class") && content.includes("text to search for")

It seems like the MatcherFunction prototype is being interpreted as a string. Could this issue be related to the lambda syntax?

typescript react-testing-library

Answer 1

Answer №1

As expected, the code is functioning properly. The function is being executed and returning a value, but unfortunately, your test is not passing. When the test runner provides feedback on failures, it may not always be straightforward in explaining what went wrong with your function. Instead, it tries to simplify the information by converting the search criteria (whether it's a string, regex, or function) into a clearer message about the failure.

One could argue that this approach leads to a suboptimal developer experience, and they wouldn't be entirely wrong. Nonetheless, everything appears to be running according to plan at this time.

Answer 2

As expected, the code is functioning properly. The function is being executed and returning a value, but unfortunately, your test is not passing. When the test runner provides feedback on failures, it may not always be straightforward in explaining what went wrong with your function. Instead, it tries to simplify the information by converting the search criteria (whether it's a string, regex, or function) into a clearer message about the failure.

One could argue that this approach leads to a suboptimal developer experience, and they wouldn't be entirely wrong. Nonetheless, everything appears to be running according to plan at this time.

React-Testing-Library - MatchingFunction represented as text

Answer №1

Similar questions

Is it possible to directly parse a multipart/mixed response without needing to first convert it into a string?

Is the translation pipe in Angular 5 impure?

Switching an Enum from one type to another in JavaScript

How can I pass a dynamic value to a sibling component in React using Typescript?

Creating types for React.ComponentType<P> in Material-UI using TypeScript

The correct way to assign a value within an Angular Observable subscribe function

Choosing options using an enum in Angular 2

tips for effectively mocking useUser, a custom TypeScript hook

The element is implicitly assigned the 'any' type due to the inability to use an expression of type to index the element

New Relic Browser is struggling to locate the identifier for 'newrelic'

The map.get method in Typescript can sometimes return undefined when the key belongs to an interface type

What is the best way to manage static asset files in Vite?

Utilize React to iterate through data retrieved from firebase

The return value depends on the type of function argument passed

When utilizing forEach to loop through and interact with elements in React Testing Library, the onClick event handler is not triggered. However, employing a for loop successfully triggers the

Styling components in React using Styled Components is versatile and can

Issues with the visibility of inlined styles within the Angular component library

Understanding the Relationship Between Interfaces and Classes in Typescript

Do you know the reason for implementing this CORS error policy?

Add Lottie Player to Angular Installation