testing-library-jquery
v2.0.0
Published
This package adds Testing Library support to jQuery. This brings the suite of Testing Libraries queries to the jQuery function.
Downloads
86
Readme
Testing Library jQuery
This package adds Testing Library support to jQuery. This brings the suite of Testing Libraries queries to the jQuery function.
$("html").getByRole("button", { name: "Submit" }).click();
Usage
import $ from "jquery";
import { extendJQuery } from "testing-library-jquery";
// extend the jQuery prototype with Testing Library DOM queries
extendJQuery($);
Use with Cypress
// in support/index.ts or support/index.js
import { extendJQuery } from "testing-library-jquery";
extendJQuery(Cypress.$);
If you want Typescript types using this library, you'll either have to use a support/index.ts
file or add the following to
the cypress/tsconfig.json
file:
{
"types": ["testing-library-jquery"]
}
Cypress uses jQuery internally and all commands that query the DOM are JQuery
subjects. This library makes working with
a Cypress command chain and jQuery elements more similar.
For example, with both @testing-library/cypress
and testing-library-jquery
, the following is possible:
// Cypress only supports `find*` queries because it is always asynchronous
cy.findByRole("form", { name: "Login" }).then(($el) => {
// $el is a JQuery object, NOT a Cypress chain
// Use `get*` and `query*` queries
$el.getByRole("textbox", { name: "Username" }).val("My Name");
});
testing-library-jquery
can be a great addition to the cypress-pipe
plugin since .pipe
will automatically retry, making get*
queries very useful and easy to make semantic helper functions in your application tests.
const getUsernameField = ($el: JQuery) =>
$el.getByRole("textbox", { name: "Username" });
cy.pipe(getUsernameField).type("My Name");
This methods keeps the Cypress command log clean vs using cy
commands directly in functions like getUsernameField
. The .pipe
command will show the name of the function being called getUsernameField
and any arguments passed.