From 77125fd96512cdc54e86990a069138428acc27ab Mon Sep 17 00:00:00 2001
From: Matan Borenkraout <Matanbobi@gmail.com>
Date: Sat, 26 Mar 2022 18:47:17 +0300
Subject: [PATCH] feat: enhance `byText` missing error (#1117)

---
 src/__tests__/element-queries.js |  9 +++++++++
 src/queries/text.ts              | 24 +++++++++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
index bac8ac4c..05724c15 100644
--- a/src/__tests__/element-queries.js
+++ b/src/__tests__/element-queries.js
@@ -57,6 +57,15 @@ test('get throws a useful error message', () => {
       <div />
     </div>
   `)
+  expect(() => getByText('Lucy      Ricardo'))
+    .toThrowErrorMatchingInlineSnapshot(`
+    Unable to find an element with the text: Lucy Ricardo (normalized from 'Lucy      Ricardo'). This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
+
+    Ignored nodes: comments, <script />, <style />
+    <div>
+      <div />
+    </div>
+  `)
   expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element by: [data-testid="LucyRicardo"]
 
diff --git a/src/queries/text.ts b/src/queries/text.ts
index 0e6ac3f7..bbda3b3d 100644
--- a/src/queries/text.ts
+++ b/src/queries/text.ts
@@ -1,7 +1,12 @@
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 import {checkContainerType} from '../helpers'
 import {DEFAULT_IGNORE_TAGS} from '../shared'
-import {AllByText, GetErrorFunction} from '../../types'
+import {
+  AllByText,
+  GetErrorFunction,
+  SelectorMatcherOptions,
+  Matcher,
+} from '../../types'
 import {
   fuzzyMatches,
   matches,
@@ -42,8 +47,21 @@ const queryAllByText: AllByText = (
 
 const getMultipleError: GetErrorFunction<[unknown]> = (c, text) =>
   `Found multiple elements with the text: ${text}`
-const getMissingError: GetErrorFunction<[unknown]> = (c, text) =>
-  `Unable to find an element with the text: ${text}. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.`
+const getMissingError: GetErrorFunction<[Matcher, SelectorMatcherOptions]> = (
+  c,
+  text,
+  options = {},
+) => {
+  const {collapseWhitespace, trim, normalizer} = options
+  const matchNormalizer = makeNormalizer({collapseWhitespace, trim, normalizer})
+  const normalizedText = matchNormalizer(text.toString())
+  const isNormalizedDifferent = normalizedText !== text.toString()
+  return `Unable to find an element with the text: ${
+    isNormalizedDifferent
+      ? `${normalizedText} (normalized from '${text}')`
+      : text
+  }. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.`
+}
 
 const queryAllByTextWithSuggestions = wrapAllByQueryWithSuggestion<
   // @ts-expect-error -- See `wrapAllByQueryWithSuggestion` Argument constraint comment