docs: implement data-test-id query using helpers (#209)

<!--
Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

**What**:

<!-- Why are these changes necessary? -->

**Why**:

<!-- How were these changes implemented? -->

**How**:

<!-- Have you done all of these things?  -->

**Checklist**:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

- [ ] Documentation
- [ ] Tests
- [ ] Ready to be merged
      <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
- [ ] Added myself to contributors table
      <!-- this is optional, see the contributing guidelines for instructions -->

<!-- feel free to add additional comments -->

Author: alexkrolick

README.md

@@ -572,20 +572,35 @@ What you can do is to create a [custom render](#custom-render) that overwrites
 
 ```js
 // test-utils.js
-import {render} from 'react-testing-library'
+import {render, queryHelpers} from 'react-testing-library'
+
+export const queryByTestId = queryHelpers.queryByAttribute.bind(null, 'data-test-id')
+export const queryAllByTestId = queryHelpers.queryAllByAttribute.bind(null, 'data-test-id')
+
+export function getAllByTestId(container, id, ...rest) {
+  const els = queryAllByTestId(container, id, ...rest)
+  if (!els.length) {
+    throw getElementError(
+      `Unable to find an element by: [data-test-id="${id}"]`,
+      container,
+    )
+  }
+  return els
+}
+
+export function getByTestId(...args) {
+  return queryHelpers.firstResultOrNull(getAllByTestId, ...args)
+}
 
 const customRender = (node, ...options) => {
   const utils = render(node, ...options)
 
   return {
     ...utils,
-    getByTestId: id => {
-      const el = utils.container.querySelector(`[data-test-id="${id}"]`)
-      if (!el) {
-        throw Error(`Unable to find an element by: [data-test-id="${id}"]`)
-      }
-      return el
-    },
+    getByTestId: getByTestId.bind(container),
+    getAllByTestId: getAllByTestId.bind(container),
+    queryByTestId: queryByTestId.bind(container),
+    queryAllByTestId: queryAllByTestId.bind(container),
   }
 }