Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setup for custom queries clashes with AllByAttribute type #804

Open
jpgorman opened this issue Apr 21, 2021 · 0 comments
Open

Setup for custom queries clashes with AllByAttribute type #804

jpgorman opened this issue Apr 21, 2021 · 0 comments

Comments

@jpgorman
Copy link

Describe the bug
https://testing-library.com/docs/react-testing-library/setup#add-custom-queries

Existing setup for custom queries documentation does not work with typescript

To Reproduce
converting the following to typescript

const queryAllByDataCy = (...args) =>
  queryHelpers.queryAllByAttribute('data-cy', ...args)
const queryAllByDataCy: AllByAttribute = (_, ...args) =>
  queryHelpers.queryAllByAttribute('data-cy', ...args)

Produces a type error in the buildQueries function
type error

Argument of type 'AllByAttribute' is not assignable to parameter of type 'GetAllBy<[container: HTMLElement, id: Matcher, options?: MatcherOptions | undefined]>'.                                                                   
  Types of parameters 'attribute' and 'container' are incompatible.                                                                                                                                                                                                               
    Type 'HTMLElement' is not assignable to type 'string'.                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                  
buildQueries(queryAllByDataCy, getMultipleError, getMissingError) 

Expected behavior
When converting the provided example to typescript the setup example should be in a format that conforms to the libraries type AllByAttribute.

This can be done by using partial application the container argument on queryHelpers.queryAllByAttribute and then updating the type of AllByAttribute to omit the partial argument
e.g.

js only:

const queryAllByDataCy = queryHelpers.queryAllByAttribute,bind(null, 'data-cy')

ts only:

type QueryAllByDataCy = (
  container: HTMLElement,
  id: Matcher,
  options?: MatcherOptions
 ) => HTMLElement[]

const queryAllByDataCy: QueryAllByDataCy = queryHelpers.queryAllByAttribute,bind(null, 'data-cy')

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Ubuntu 20.04.2 LTS
  • Typescript ^4.2.4
  • Node 15.14.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant