testing-library-extra
Add bySelector and byAttribute to @testing-library/dom
Why?
The manager of @testing-library/dom believes that using the querySelector API as an escape hatch in test code is a bad practice.
However, for some specific purposes, such as automation in browser extensions, not having CSS selectors would become extremely challenging.
See: PR (267) issues (512)
Install
npm install testing-library-extra
Usage
Use BySelector
Example DOM
<button class="open-dialog">open dialog</button>
<div class="dialog">
<form>
<input name="username"/>
<input name="password"/>
<button type="submit"/>
</form>
</div>
Use the css selector to simulate user login.
import { getBySelector, findBySelector } from 'testing-library-extra'
import userEvent from '@testing-library/user-event'
const dialogButton = getBySelector(document.body, '.open-dialog')
// Click the button to pop up the user form.
userEvent.click(dialogButton)
const dialog = await findBySelector(document.body, '.dialog', { timeout: 1000 })
const usernameInput = getBySelector(dialog, 'form input[name="username"]')
const passwordInput = getBySelector(dialog, 'form input[name="password"]')
const loginButton = getBySelector(dialog, 'form button[type="submit"]')
userEvent.type(usernameInput, 'admin')
userEvent.type(passwordInput, 'abc123')
userEvent.click(loginButton)
Use ByAttribute
Example DOM
<button data-action="openFn...">open dialog<button>
<div data-id="dialog">
<form>
<input data-name="username"/>
<input data-name="password"/>
<button data-action="loginFn" type="submit"/>
</form>
</div>
Use the attribute selector to match any dom.
import { getByAttribute, findByAttribute } from 'testing-library-extra'
import userEvent from '@testing-library/user-event'
const dialogButton = getByAttribute(document.body, 'data-action', /^open/)
userEvent.click(dialogButton)
const dialog = await findByAttribute(document.body, 'data-id', 'dialog', { timeout: 1000 })
const usernameInput = getByAttribute(dialog, 'data-name', 'username')
const passwordInput = getByAttribute(dialog, 'data-name', 'password')
const loginButton = getByAttribute(dialog, 'data-action', /^login/)
userEvent.type(usernameInput, 'admin')
userEvent.type(passwordInput, 'abc123')
userEvent.click(loginButton)
Expose API
This project exposes the following api, and the usage is consistent with the original project types-of-queries.
-
BySelector
-
getAllBySelector
-
queryBySelector
-
queryAllBySelector
-
findBySelector
-
findAllBySelector
-
ByAttribute
-
getByAttribute
-
getAllByAttribute
-
queryByAttribute
-
queryAllByAttribute
-
findByAttribute
-
findAllByAttribute
LICENSE
This project is licensed under the MIT License - see the LICENSE file for details.
