From a2955c5efb56e525f4347cd9244ef394f8f597c8 Mon Sep 17 00:00:00 2001
From: Nick McCurdy <nick@nickmccurdy.com>
Date: Tue, 20 Jul 2021 13:20:18 -0400
Subject: [PATCH 1/3] docs: add TypeScript example for custom-queries.js (fix
 #889)

---
 docs/react-testing-library/setup.mdx | 53 ++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx
index 138789de6..40a8323cb 100644
--- a/docs/react-testing-library/setup.mdx
+++ b/docs/react-testing-library/setup.mdx
@@ -155,6 +155,11 @@ elements by `data-cy`, a "test ID" convention mentioned in the
 [Cypress.io](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements)
 documentation.
 
+  <Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'Javascript',
+  value: 'js'}, {label: 'Typescript', value: 'ts'}, ]}>
+
+  <TabItem value="js">
+
 ```js title="custom-queries.js"
 import { queryHelpers, buildQueries } from '@testing-library/react'
 
@@ -187,6 +192,54 @@ export {
 }
 ```
 
+  </TabItem>
+
+  <TabItem value="ts">
+
+```js title="custom-queries.ts"
+import {
+  queryHelpers,
+  buildQueries,
+  Matcher,
+  MatcherOptions,
+} from '@testing-library/react'
+
+// The queryAllByAttribute is a shortcut for attribute-based matchers
+// You can also use document.querySelector or a combination of existing
+// testing library utilities to find matching nodes for your query
+const queryAllByDataCy = (
+  container: HTMLElement,
+  id: Matcher,
+  options?: MatcherOptions | undefined
+) => queryHelpers.queryAllByAttribute('data-cy', container, id, options)
+
+const getMultipleError = (c, dataCyValue) =>
+  `Found multiple elements with the data-cy attribute of: ${dataCyValue}`
+const getMissingError = (c, dataCyValue) =>
+  `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,
+}
+```
+
+  </TabItem>
+
+  </Tabs>
+
 You can then override and append the new queries via the render function by
 passing a [`queries`](api.mdx#render-options) option.
 

From ac4c6a0ce6e7acb9c9767d114eff6b09d4a81d6a Mon Sep 17 00:00:00 2001
From: Nick McCurdy <nick@nickmccurdy.com>
Date: Wed, 21 Jul 2021 18:27:20 -0400
Subject: [PATCH 2/3] docs: fix language extension

---
 docs/react-testing-library/setup.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx
index 40a8323cb..232c39454 100644
--- a/docs/react-testing-library/setup.mdx
+++ b/docs/react-testing-library/setup.mdx
@@ -196,7 +196,7 @@ export {
 
   <TabItem value="ts">
 
-```js title="custom-queries.ts"
+```ts title="custom-queries.ts"
 import {
   queryHelpers,
   buildQueries,

From 7376aaaa8b154176e5312117ab54edca14ca5666 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 9 Aug 2022 19:58:35 +0200
Subject: [PATCH 3/3] Apply suggestions from code review

Use language branding
---
 docs/react-testing-library/setup.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx
index 232c39454..48d07fed8 100644
--- a/docs/react-testing-library/setup.mdx
+++ b/docs/react-testing-library/setup.mdx
@@ -155,8 +155,8 @@ elements by `data-cy`, a "test ID" convention mentioned in the
 [Cypress.io](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements)
 documentation.
 
-  <Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'Javascript',
-  value: 'js'}, {label: 'Typescript', value: 'ts'}, ]}>
+  <Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'JavaScript',
+  value: 'js'}, {label: 'TypeScript', value: 'ts'}, ]}>
 
   <TabItem value="js">