findBy* & findAllBy* have wrong argument types for TS

[denysdovhan]

• DOM Testing Library version: 7.2.0
• node version: 12.13.0
• yarn version: 1.22

Relevant code or config:

export const queryAllByAttribute = (
    container: HTMLElement,
    attribute: string,
    value: Matcher,
    options?: MatcherOptions
) => queryHelpers.queryAllByAttribute(attribute, container, value, options);

const includesAutomationId = (content: string, automationId: string) =>
    content.split(/\s+/).some(id => id === automationId);

export const queryAllByAutomationId = (
    container: HTMLElement,
    automationId: string | string[],
    options?: MatcherOptions
) =>
    queryAllByAttribute(
        container,
        TEST_ID_ATTRIBUTE,
        content => Array.isArray(automationId) ?
            automationId.every(id => includesAutomationId(content, id)) :
            includesAutomationId(content, automationId)
        ,
        options
    );

export const [
    queryByAutomationId,
    getAllByAutomationId,
    getByAutomationId,
    findAllByAutomationId,
    findByAutomationId
] = buildQueries(queryAllByAutomationId, getMultipleError, getMissingError);

const waitForOptions = { timeout: 2000 }

findByAutomationId(root, testId, options, waitForOptions), // <-  Expected 2-3 arguments, but got 4.ts(2554)
findAllByAutomationId(root, testId, options, waitForOptions), // <-  Expected 2-3 arguments, but got 4.ts(2554)

What you did:

I generated custom findBy and findAllBy queries by buildQueries.

What happened:

Generated queries have lost TypeScript types for 4th argument waitForOptions.

Problem description:

I've noticed all findBy*/findAllBy* methods have 4th param, for example:

export type FindAllByText = (
    container: HTMLElement,
    id: Matcher,
    options?: SelectorMatcherOptions,
    waitForElementOptions?: WaitForElementOptions,
) => Promise<HTMLElement[]>;

However, buildQueries returns FindBy and FindAllBy queries without that param:

export type QueryMethod<Arguments extends any[], Return> = (container: HTMLElement, ...args: Arguments) => Return;

export type FindAllBy<Arguments extends any[]> = QueryMethod<Arguments, Promise<HTMLElement[]>>;
export type FindBy<Arguments extends any[]> = QueryMethod<Arguments, Promise<HTMLElement>>;

Suggested solution:

Add 4th param type to the QueryMethod type or make special FindQueryMethod type with that param.

[Lagily]

Can you add your definition of queryAllByAutomationId, so I can replicate this or create a sandbox where this behaviour is visible?

[denysdovhan]

@Lagily I updated the original issue's text with definitions of that function.

[kentcdodds]

We recently moved the types into this package and I think this was fixed. Please open a new issue if that's not the case.

Thank you!

[denysdovhan]

@kentcdodds this wasn't. findBy and findAllBy queries have correct types. This issue relates to the queries generated with buildQueries.

[Lagily]

@denysdovhan Do you think you could make a pull request that fixes this? I see the problem, but I am unable to find a way to do this in TypeScript currently, as the passed params need to be put in between the HtmlElement and waitFor params that are always returned

And yeah this is sadly not fixed, issue could be reopened

[denysdovhan]

@Lagily I'm not familiar with TS typings so well :(

[kentcdodds]

🎉 This issue has been resolved in version 7.5.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀