Skip to content

Typescript: buildQueries should pass Arguments through to GetErrorFunction #1037

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

Closed
dturcotte opened this issue Sep 23, 2021 · 1 comment · Fixed by #1041
Closed

Typescript: buildQueries should pass Arguments through to GetErrorFunction #1037

dturcotte opened this issue Sep 23, 2021 · 1 comment · Fixed by #1041
Labels
enhancement New feature or request TypeScript

Comments

@dturcotte
Copy link

dturcotte commented Sep 23, 2021

  • @testing-library/dom version: 8.6.0 (via @testing-library/[email protected]
  • Testing Framework and version: jest 26.6.3
  • DOM Environment: jsdom 16.4.0

Relevant code or config:

This is likely a small oversight from this PR:
https://github.com/testing-library/dom-testing-library/pull/1016/files#diff-bd112f388b709e19de79e65dceba95e350e0cd11b3aa198813c67a0121055792R70-L65

The resulting types:

export function buildQueries<Arguments extends any[]>(
  queryAllBy: GetAllBy<Arguments>,
  getMultipleError: GetErrorFunction,
  getMissingError: GetErrorFunction,
): BuiltQueryMethods<Arguments>

What you did:

Here's a contrived example of a custom query that takes two arguments. Let's try to use these arguments to show a better error message:

buildQueries(
  (container: HTMLElement, key: string | RegExp, value: string | RegExp) =>
    doMagic(container, key, value),
  (_container, ...args) => {
    const [key, value] = args;
    return `Found multiple with key ${key.toString()} and value ${value.toString()}`;
  },
  () => `Found none`,
);

What happened:

Screen Shot 2021-09-23 at 2 39 35 PM

The types for the arguments to GetErrorFunction are stuck at the default. At runtime, you can log ...args and see that the expected key and value are passed.

Reproduction:

I can try to put together a TS repo if you need it, but here's all the code you need to see it:

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

const doMagic = (_args: {
  container: HTMLElement;
  key: string | RegExp;
  value: string | RegExp;
}) => [];

buildQueries(
  (container: HTMLElement, key: string | RegExp, value: string | RegExp) =>
    doMagic({ container, key, value }),
  (_container, ...args) => {
    const [key, value] = args;
    return `Found multiple with key ${key.toString()} and value ${value.toString()}`;
  },
  () => `Found none`,
);

Problem description:

The types should match the intent and the runtime result and the GetErrorFunctions for multiple/none in custom queries should accept the same Arguments

Suggested solution:

Forwarding Arguments to GetErrorFunction should do the trick

@eps1lon eps1lon added enhancement New feature or request TypeScript labels Sep 29, 2021
@eps1lon
Copy link
Member

eps1lon commented Sep 29, 2021

Thanks for the feedback.

Happy to review a PR. You can use your example as a type test.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request TypeScript
Projects
None yet
2 participants