query-extensions
Extensions for core @testing-library queries
Kent & Travis briefly discuss during one of Kent's helpful office hours sessions
Install
npm install query-extensions # or yarn add query-extensions
Motivation
Here's the reason this package exists:
;;// ... more imports ; ;
TL;DR wouldn't it be nice to reuse your querying configs without coupling to a particular flavor of get/query/find?
If that (contrived) example doesn't sell you outright, consider a couple of "maintenance" scenarios. What happens to each test (or a much bigger, more hypothetical test suite) if:
- A UI element goes from rendering sync to async (or vice versa)
- A UI element has a text/markup/label change which requires a different query
Usage
screen
There's a handy, pre-built screen
object available for direct use. This is
probably the most common way you'll interact with query-extensions
;;// ... more imports
within
Similarly, query-extensions
provides its own version of the within
API which
makes the extended queries available on the resulting query object.
;;// ... more imports ;
Scoping with within
is also possible via the within
property of the query
descriptor object (this can nest/compose with itself as well as the top-level
within
API)
;;// ... more imports ;
enhanceQueries
You can also enhance any query objects you like using enhanceQueries
;;// ... more imports
queryBySelector
(and the whole *BySelector family)
OK, you really should do everything in your power to keep your tests following the guiding principles of @testing-library
BUT sometimes your application code is just a bit of a mess and your tests
really need to drop down and do a standard querySelector
-style interaction.
This has always been possible with a bit of manual intervention, but
query-extensions
offers a simple wrapper for API consistency.
;;// ... more imports ;