implement closest matches suggestions on testId query

Author: dougbacelar

src/__tests__/element-queries.js

@@ -1273,3 +1273,42 @@ it(`should get element by it's label when there are elements with same text`, ()
   `)
   expect(getByLabelText('test 1')).toBeInTheDocument()
 })
+
+test('returns closest match when computeCloseMatches = true', () => {
+  const {getByTestId} = render(`
+<div>
+  <div data-testid="cat-dog"></div>
+  <div data-testid="meerkat"></div>
+  <div data-testid="tamandua"></div>
+</div>`)
+
+  expect(() => getByTestId('meercat', {computeCloseMatches: true}))
+    .toThrowErrorMatchingInlineSnapshot(`
+"Unable to find an element by: [data-testid="meercat"]. Did you mean one of the following?
+meerkat
+
+<div>
+  
+
+  <div>
+    
+  
+    <div
+      data-testid="cat-dog"
+    />
+    
+  
+    <div
+      data-testid="meerkat"
+    />
+    
+  
+    <div
+      data-testid="tamandua"
+    />
+    
+
+  </div>
+</div>"
+`)
+})

src/queries/test-id.js

@@ -1,3 +1,4 @@
+import {getCloseMatchesByAttribute} from '../close-matches'
 import {checkContainerType} from '../helpers'
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 import {queryAllByAttribute, getConfig, buildQueries} from './all-utils'
@@ -11,8 +12,28 @@ function queryAllByTestId(...args) {
 
 const getMultipleError = (c, id) =>
   `Found multiple elements by: [${getTestIdAttribute()}="${id}"]`
-const getMissingError = (c, id) =>
-  `Unable to find an element by: [${getTestIdAttribute()}="${id}"]`
+const getMissingError = (
+  c,
+  id,
+  {computeCloseMatches = false, ...options} = {},
+) => {
+  const defaultMessage = `Unable to find an element by: [${getTestIdAttribute()}="${id}"]`
+  if (!computeCloseMatches || typeof id !== 'string') {
+    return defaultMessage
+  }
+
+  const closeMatches = getCloseMatchesByAttribute(
+    getTestIdAttribute(),
+    c,
+    id,
+    options,
+  )
+  return closeMatches.length === 0
+    ? defaultMessage
+    : `${defaultMessage}. Did you mean one of the following?\n${closeMatches.join(
+        '\n',
+      )}`
+}
 
 const queryAllByTestIdWithSuggestions = wrapAllByQueryWithSuggestion(
   queryAllByTestId,