Skip to main content

testing-library-selector

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()
expect(ui.submitButton.query()).not.toBeInDocument()
expect(ui.submitButton.get()).toBeInDocument()

const containers = ui.container.getAll()
expect(containers).toHaveLength(3)

// provide a container as first param to query element inside that container
const username = ui.usernameInput.get(containers[0])
})