testing-library-selector is a library for @testing-library that provides reusable selectors. Written in typescript.

npm install --save-dev testing-library-selector
import { byLabelText, byRole, byTestId } from './selector'
// define reusable selectors
const ui = {
container: byTestId('my-container'),
submitButton: byRole('button', { name: 'Submit' }),
usernameInput: byLabelText('Username:'),
// can encode more specific html element type
passwordInput: byLabelText<HTMLInputElement>('Password:'),
// reuse them in the same test or across multiple tests by calling
// .get(), .getAll(), .find(), .findAll(), .query(), .queryAll()
it('example test', async () => {
// by default elements will be queried against screen
await ui.submitButton.find()
const containers = ui.container.getAll()
// provide a container as first param to query element inside that container
const username = ui.usernameInput.get(containers[0])
Last updated on by Domas