Adding support for extending with custom queries

[pvinis]

Summary

After the discussion on #569 and #566, I tried to make the prototype for this.

I think it's kind of alright, but I need some help with the flowtyping, as I'm not too familiar with it.

Test plan

[mikeduminy]

This would be a huge time saver while we wait for other PRs to be merged. +1

[klekowskim]

I personally would go with the same API and behaviour as in react-testing-library: https://github.com/testing-library/react-testing-library/blob/c546a6f4927f925bf1187e631ca0444001f067f5/src/pure.js#L35

[pvinis]

I can rename it 👍
I haven't used that lib so I'm not familiar. I'll look into it a bit.

[mdjastrzebski]

I like the idea of allowing custom queries in RNTL.

Big heads up to using the same API as React Testing Library because:

• we re-use RTLs effort that went into creating that API & avoid potential mistakes
• we allow devs to easily transition between web/RN tests
• we allow some code reusage between web/RN

RTL's also exposes buildQueries so that devs can easily add new quieries in all variants (getBy, getAllBy, queryBy,...) by providing just queryAllBy variant. It would be good to provide that as well.

[thymikee]

RTL's also exposes buildQueries so that devs can easily add new quieries in all variants (getBy, getAllBy, queryBy,...) by providing just queryAllBy variant. It would be good to provide that as well.

Sounds like a good idea for another contribution, that would align with some refactoring we plan: #325

[pvinis]

I renamed it. Is this good to go then? And after this is merged we can work on the buildQueries with the refactoring anyway.

[thymikee]

Can you make sure lint and flow pass?

[pvinis]

Yup yup. I thought the last commit would fix that 😬.

[pvinis]

Interestingly it complains even though I have an ignore right above.
https://github.com/callstack/react-native-testing-library/pull/573/files#diff-9c1abad9b45f5a8bc3d32761977018ab6ede546246de46f8c7b1cbf75b320651R384

That instance there is needed, since that's how custom queries will access the instance. I just made one that is not using it for the test.

[thymikee]

Looks good! I made some final adjustments for the API to be compatible with Testing Library

[thymikee]

Struggling a bit on how to type it better, so that custom queries are inferred without forced generics. We can improve it later though

[mdjastrzebski]

Overall looks good, consider adding generic typedefs. I've provided source for RTL/DTL ts types, so we should be able to easily apply them. Flow might be more difficult but I guess that typescript is now more popular in the ecosystem.

Anyway, we still need TS types tests + some docs.

[mdjastrzebski]

I check RTL/DTL and they seem to have quite decent TS typings for custom queries:

export type Query = (
    container: HTMLElement,
    ...args: any[]
) => Error | Promise<HTMLElement[]> | Promise<HTMLElement> | HTMLElement[] | HTMLElement | null;

export interface Queries {
    [T: string]: Query;
}

Source: https://github.com/testing-library/dom-testing-library/blob/master/types/get-queries-for-element.d.ts

export type RenderResult<Q extends Queries = typeof queries> = {
  // ...
} & {[P in keyof Q]: BoundFunction<Q[P]>}

export interface RenderOptions<Q extends Queries = typeof queries> {
  // ...
  queries?: Q
}

Source: https://github.com/testing-library/react-testing-library/blob/master/types/index.d.ts

IMO we could have the same at least for TS, possibly for flow as well if possible.

[mdjastrzebski]

Please note that the Query type restricts return value to (Promise)(Array) Element + null + Error. IMO if we provide element queries then we should also consider similar restriction. wdyt?

[thymikee]

@pvinis we just released v7.1.0 with container exposed from render, so queries is no longer necessary for your use case. We can wait a bit more with merging this unless we have a good type story around that for Flow and TS.

[mdjastrzebski]

Closing the PR as a stale code, however the idea is worth pursuing so I've created an issue #971 based on this PR.