From d50a9672af6adc80f1e79e4eeb4e0342f3d1e5de Mon Sep 17 00:00:00 2001
From: Robin Drexler <drexler.robin@gmail.com>
Date: Tue, 9 Aug 2022 10:09:12 -0400
Subject: [PATCH] fix: log ignored selectors correctly on error (#1141)

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>
---
 src/__tests__/element-queries.js | 59 ++++++++++++++++++++++----------
 src/__tests__/role.js            | 54 ++++++++++++++---------------
 src/__tests__/suggestions.js     |  4 +--
 src/__tests__/wait-for.js        | 44 ++++++++++++------------
 src/config.ts                    |  2 +-
 5 files changed, 93 insertions(+), 70 deletions(-)

diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
index 0739ea37..83a897f4 100644
--- a/src/__tests__/element-queries.js
+++ b/src/__tests__/element-queries.js
@@ -1,6 +1,16 @@
-import {configure} from '../config'
+import {configure, getConfig} from '../config'
 import {render, renderIntoDocument} from './helpers/test-utils'
 
+// set original config
+let originalConfig
+beforeAll(() => {
+  originalConfig = getConfig()
+})
+
+afterEach(() => {
+  configure(originalConfig)
+})
+
 test('query can return null', () => {
   const {
     queryByLabelText,
@@ -35,7 +45,7 @@ test('get throws a useful error message', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     Unable to find a label with the text of: LucyRicardo
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -44,7 +54,7 @@ test('get throws a useful error message', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element with the placeholder text of: LucyRicardo
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -52,7 +62,7 @@ test('get throws a useful error message', () => {
   expect(() => getByText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element with the text: LucyRicardo. 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 />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -61,7 +71,7 @@ test('get throws a useful error message', () => {
     .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 />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -69,7 +79,7 @@ test('get throws a useful error message', () => {
   expect(() => getByTestId('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element by: [data-testid="LucyRicardo"]
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -77,7 +87,7 @@ test('get throws a useful error message', () => {
   expect(() => getByAltText('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element with the alt text: LucyRicardo
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -85,7 +95,7 @@ test('get throws a useful error message', () => {
   expect(() => getByTitle('LucyRicardo')).toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element with the title: LucyRicardo.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -94,7 +104,7 @@ test('get throws a useful error message', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element with the display value: LucyRicardo.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -104,7 +114,7 @@ test('get throws a useful error message', () => {
 
     There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -371,7 +381,7 @@ test('label with no form control', () => {
   expect(() => getByLabelText(/alone/)).toThrowErrorMatchingInlineSnapshot(`
     Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <label>
         All alone
@@ -389,7 +399,7 @@ test('label with "for" attribute but no form control and fuzzy matcher', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     Found a label with the text of: alone, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <label
         for="foo"
@@ -412,7 +422,7 @@ test('label with children with no form control', () => {
     .toThrowErrorMatchingInlineSnapshot(`
     Found a label with the text of: /alone/, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       
       
@@ -453,7 +463,7 @@ test('label with non-labellable element', () => {
   expect(() => getByLabelText(/Label/)).toThrowErrorMatchingInlineSnapshot(`
     Found a label with the text of: /Label/, however the element associated with this label (<div />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <div />, you can use aria-label or aria-labelledby instead.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       
       
@@ -503,7 +513,7 @@ test('multiple labels with non-labellable elements', () => {
 
     Found a label with the text of: /Label/, however the element associated with this label (<p />) is non-labellable [https://html.spec.whatwg.org/multipage/forms.html#category-label]. If you really need to label a <p />, you can use aria-label or aria-labelledby instead.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       
       
@@ -555,7 +565,7 @@ test('totally empty label', () => {
   expect(() => getByLabelText('')).toThrowErrorMatchingInlineSnapshot(`
     Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <label />
     </div>
@@ -1092,6 +1102,19 @@ test('the default value for `ignore` can be configured', () => {
   expect(noStyle[1].tagName).toBe('DIV')
 })
 
+test('the default value for `ignore` is used in errors', () => {
+  configure({defaultIgnore: 'div'})
+
+  const {getByText} = render('<div>Hello</div>')
+
+  expect(() => getByText(/hello/i)).toThrowErrorMatchingInlineSnapshot(`
+    Unable to find an element with the text: /hello/i. 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, div
+    <div />
+  `)
+})
+
 test('get/query input element by current value', () => {
   const {getByDisplayValue, queryByDisplayValue, getByTestId} =
     renderIntoDocument(`
@@ -1206,7 +1229,7 @@ test('return a proper error message when no label is found and there is an aria-
     .toThrowErrorMatchingInlineSnapshot(`
     Unable to find a label with the text of: LucyRicardo
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <input
         aria-labelledby="not-existing-label"
@@ -1276,7 +1299,7 @@ test('ByText error message ignores not the same elements as configured in `ignor
   ).toThrowErrorMatchingInlineSnapshot(`
     Unable to find an element with the text: .css-selector. 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 />
+    Ignored nodes: comments, script, style
     <body>
       
         
diff --git a/src/__tests__/role.js b/src/__tests__/role.js
index fb573bcd..c709d82e 100644
--- a/src/__tests__/role.js
+++ b/src/__tests__/role.js
@@ -16,7 +16,7 @@ test('by default logs accessible roles when it fails', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <h1>
         Hi
@@ -40,7 +40,7 @@ test('when hidden: true logs available roles when it fails', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div
         hidden=""
@@ -60,7 +60,7 @@ test('logs error when there are no accessible roles', () => {
 
     There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -75,7 +75,7 @@ test('logs a different error if inaccessible roles should be included', () => {
 
     There are no available roles.
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div />
     </div>
@@ -90,7 +90,7 @@ test('by default excludes elements that have the html hidden attribute or any of
 
     There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div
         hidden=""
@@ -111,7 +111,7 @@ test('by default excludes elements which have display: none or any of their pare
 
     There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div
         style="display: none;"
@@ -134,7 +134,7 @@ test('by default excludes elements which have visibility hidden', () => {
 
     There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div>
         <ul
@@ -159,7 +159,7 @@ test('by default excludes elements which have aria-hidden="true" or any of their
 
     There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the \`hidden\` option to \`true\`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <div
         aria-hidden="true"
@@ -249,7 +249,7 @@ test('accessible name comparison is case sensitive', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <h1>
         Sign 
@@ -296,7 +296,7 @@ test('TextMatch serialization in error message', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <h1>
         Sign 
@@ -320,7 +320,7 @@ test('TextMatch serialization in error message', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <h1>
         Sign 
@@ -348,7 +348,7 @@ test('does not include the container in the queryable roles', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <ul>
       <li />
     </ul>
@@ -391,7 +391,7 @@ test('explicit role is most specific', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <body>
       <button
         aria-label="my-tab"
@@ -415,24 +415,24 @@ test('accessible regex name in error message for multiple found', () => {
 
     Here are the matching elements:
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Increment value
     </button>
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Decrement value
     </button>
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Reset value
     </button>
 
     (If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <button>
         Increment value
@@ -461,24 +461,24 @@ test('accessible string name in error message for multiple found', () => {
 
     Here are the matching elements:
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Submit
     </button>
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Submit
     </button>
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Submit
     </button>
 
     (If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <button>
         Submit
@@ -508,19 +508,19 @@ test('matching elements in error for multiple found', () => {
 
     Here are the matching elements:
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Increment value
     </button>
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <button>
       Reset value
     </button>
 
     (If this is intentional, then use the \`*AllBy*\` variant of the query (like \`queryAllByText\`, \`getAllByText\`, or \`findAllByText\`)).
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <div>
       <button>
         Increment value
@@ -640,7 +640,7 @@ test('error should include description when filtering and no results are found',
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <body>
       <div
         aria-describedby="some-id"
@@ -690,7 +690,7 @@ test('TextMatch serialization for description filter in error message', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <body>
       <div
         aria-describedby="some-id"
@@ -734,7 +734,7 @@ test('TextMatch serialization for description filter in error message', () => {
 
       --------------------------------------------------
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <body>
       <div
         aria-describedby="some-id"
diff --git a/src/__tests__/suggestions.js b/src/__tests__/suggestions.js
index 2ce4282b..79a12821 100644
--- a/src/__tests__/suggestions.js
+++ b/src/__tests__/suggestions.js
@@ -111,7 +111,7 @@ test('should suggest getByRole when used with getBy', () => {
     getByRole('button', { name: /submit/i })
 
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <body>
       <button
         data-testid="foo"
@@ -133,7 +133,7 @@ test('should suggest getAllByRole when used with getAllByTestId', () => {
     getAllByRole('button', { name: /submit/i })
 
 
-    Ignored nodes: comments, <script />, <style />
+    Ignored nodes: comments, script, style
     <body>
       
         
diff --git a/src/__tests__/wait-for.js b/src/__tests__/wait-for.js
index c1198e33..a80b9fe4 100644
--- a/src/__tests__/wait-for.js
+++ b/src/__tests__/wait-for.js
@@ -132,20 +132,20 @@ test('timeout logs a pretty DOM', async () => {
     {timeout: 1},
   ).catch(e => e)
   expect(error.message).toMatchInlineSnapshot(`
-always throws
-
-Ignored nodes: comments, <script />, <style />
-<html>
-  <head />
-  <body>
-    <div
-      id="pretty"
-    >
-      how pretty
-    </div>
-  </body>
-</html>
-`)
+    always throws
+
+    Ignored nodes: comments, script, style
+    <html>
+      <head />
+      <body>
+        <div
+          id="pretty"
+        >
+          how pretty
+        </div>
+      </body>
+    </html>
+  `)
 })
 
 test('should delegate to config.getElementError', async () => {
@@ -194,14 +194,14 @@ test('when a promise is returned, if that is not resolved within the timeout, th
   await sleep(5)
 
   expect((await waitForError).message).toMatchInlineSnapshot(`
-Timed out in waitFor.
-
-Ignored nodes: comments, <script />, <style />
-<html>
-  <head />
-  <body />
-</html>
-`)
+    Timed out in waitFor.
+
+    Ignored nodes: comments, script, style
+    <html>
+      <head />
+      <body />
+    </html>
+  `)
 })
 
 test('if you switch from fake timers to real timers during the wait period you get an error', async () => {
diff --git a/src/config.ts b/src/config.ts
index 161e58f4..0168ba88 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -38,7 +38,7 @@ let config: InternalConfig = {
     const error = new Error(
       [
         message,
-        `Ignored nodes: comments, <script />, <style />\n${prettifiedDOM}`,
+        `Ignored nodes: comments, ${config.defaultIgnore}\n${prettifiedDOM}`,
       ]
         .filter(Boolean)
         .join('\n\n'),