TS example of custom-queries.js

[robbienohra]

Describe the feature you'd like:

The current setup documentation has a TS example for the test-utils.js script (namely test-utils.tsx). It does not, however, have a TS example of the custom-queries.js script. The ask is to update the documentation with such an example — I've tried implementing one myself with some difficulty.

Suggested implementation:

Update the current document with an example as indicated above.

Example:

import { queryHelpers, buildQueries } from '@testing-library/react'

const queryAllByDataCy = (...args: unknown[]) =>
  queryHelpers.queryAllByAttribute('data-cy', ...args)

const getMultipleError = (c: HTMLElement, dataCyValue: unknown) =>
  `Found multiple elements with the data-cy attribute of: ${dataCyValue}`
const getMissingError = (c: HTMLElement, dataCyValue: unknown) =>
  `Unable to find an element with the data-cy attribute of: ${dataCyValue}`

const [
  queryByDataCy,
  getAllByDataCy,
  getByDataCy,
  findAllByDataCy,
  findByDataCy,
] = buildQueries(queryAllByDataCy, getMultipleError, getMissingError)

export {
  queryByDataCy,
  queryAllByDataCy,
  getByDataCy,
  getAllByDataCy,
  findAllByDataCy,
  findByDataCy,
}

Still seeing the following warning (not feeling comfortable with unknown[] but it looks like the underlying type is Arguments extends any[] and not sure how to correctly apply that here)

Describe alternatives you've considered:

NA

Teachability, Documentation, Adoption, Migration Strategy:

NA

[MatanBobi]

Hi @robbienohra!
Thanks for opening this. We're currently in an ongoing process to add TypeScript examples to our docs.
PR's are more than welcome :)

I'm moving this issue to the docs repo.
Thanks!

[robbienohra]

Thanks @MatanBobi

[robbienohra]

Any tips for resolving the ...args type?

[nickserv]

...args is unknown[], which is an array of any length. queryAllByAttribute only has 3-4 arguments, so its arguments can't be variable. You can work around this with tuple manipulation (I don't remember the syntax) or manually passing arguments:

const queryAllByDataCy = (container: HTMLElement, id: Matcher, options?: MatcherOptions | undefined) =>
  queryHelpers.queryAllByAttribute('data-cy', container, id, options)

[robbienohra]

...args is unknown[], which is an array of any length. queryAllByAttribute only has 3-4 arguments, so its arguments can't be variable. You can work around this with tuple manipulation (I don't remember the syntax) or manually passing arguments:

const queryAllByDataCy = (container: HTMLElement, id: Matcher, options?: MatcherOptions | undefined) =>
  queryHelpers.queryAllByAttribute('data-cy', container, id, options)

beauty 🥳

thanks, @nickmccurdy!