Description
Thank you for this excellent library! I'm a longtime user of RNTL, and something I have struggled with is that when a ByText query fails, the output does not help me determine the cause of the failure:
expect(screen.getByText(/HELLOOO/)).toBeDefined()
> Unable to find an element with text: /HELLOOO/When I encounter a failure like the above, my usual next step is to insert a screen.debug() or some console.log() statements and rerun the test until I can understand the cause of the failure.
If the test uses the async findByText query, then adding these debug or log statements manually can be a bit more difficult, and I usually do something like this:
await sleep(100) // wait 100ms to simulate what the findBy normally does before debugging
screen.debug()
expect(away screen.findByText(/HELLOOO/)).toBeDefined() // the line that was erroringPrevious workaround (toHaveTextContent matcher)
I recently found a workaround that fit my needs, using the jest-native toHaveTextContent matcher:
expect(screen.container).toHaveTextContent(/HELLOOO/)
> Expected element to have text content:
> /HELLOOO/
> Received:
> HELLOWelcome to the AppSign InForgot Password
As can be seen above, the toHaveTextContent matcher outputs all of the text from the screen along with the error message, which can be quite helpful for diagnosing why the test is failing.
This workaround however no longer seems like a safe approach since in the latest version of RNTL screen.container is discouraged and has been renamed to UNSAFE_root.
Additionally, using the toHaveTextContent matcher is non-standard and something we have to train teams to use instead of the ByText queries. Ideally, we could solve this problem with the ByText queries themselves
Comparing to React Testing Library (web)
As can be seen in this Code Sandbox, React Testing Library helpfully outputs the full DOM when a byText query fails:
Unable to find an element with the text: /HELLOO/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<h1>
Hello
Jill
!
</h1>
</div>
</body>
Proposal
A more helpful error message when a byText query fails would dramatically improve the testing experience with React Native. Ideally, we could achieve something like the error message that is shown on the web.
I haven't contributed to this project before, but I'm a longtime user and would be happy to help out with a contribution if maintainers agree that this would be valuable.