Rtl-simple-queries NPM

The problem

To get an element from while testing with - @testing-library/react, we have 6 variants viz. getBy, getAllBy, queryBy, queryAllBy, findBy, and findAllBy.

We have to remember which one to use when. The name of methods is entirely a familiarity thing. But just by the name of the method it bit difficult to know which one would throw error if an element is not found or which takes into account async updates.

This solution

This library wraps those methods with easier to remember APIs

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev rtl-simple-queries

Usage

screen can be exported from 'rtl-simple-queries'

Addional parameters from sync query allowEmpty and allowMultiple and for async we only have one option allowMultiple

import {screen} from 'rtl-simple-queries'

screen.fetchByText(/text/, {allowEmpty: true, allowMultiple: false})
screen.fetchByText(/text/, {allowMultiple: false})
screen.fetchByText(/text/)

// async
await screen.fetchByTextAsync(/text/, {allowMultiple: true})

To use queies for scoped container we could do

// test-utils. js
function render(component, options) {
  const utils = rtlRender(component, options)
  const queries = getSimpleQueries(utils)
  return {...utils, ...renderSyncQueries}
}

// use this render instead of importing from @testing-library/react
const {fetchByText} = render(<p>text</p>)