testing-library-selector
TypeScript icon, indicating that this package has built-in type declarations

0.3.1 • Public • Published

testing-library-selector

Reusable selectors for @testing-library. Define selectors for ui elements that can be reused inside the same test or between tests. Full typescript support.

Install

npm install --save-dev testing-library-selector
yarn add -D testing-library-selector

Usage

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]);
});

/testing-library-selector/

    Package Sidebar

    Install

    npm i testing-library-selector

    Weekly Downloads

    28,842

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    23.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • domasx2