feat(getByText): add ignore option which defaults to 'script' (testing-library#109)

Author: Kent C. Dodds

README.md

@@ -297,6 +297,7 @@ getByText(
     exact?: boolean = true,
     collapseWhitespace?: boolean = true,
     trim?: boolean = true,
+    ignore?: string|boolean = 'script'
   }): HTMLElement
 ```
 
@@ -310,6 +311,14 @@ const aboutAnchorNode = getByText(container, 'about')
 
 > NOTE: see [`getByLabelText`](#getbylabeltext) for more details on how and when to use the `selector` option
 
+The `ignore` option accepts a query selector. If the
+[`node.matches`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches)
+returns true for that selector, the node will be ignored. This defaults to
+`'script'` because generally you don't want to select script tags, but if your
+content is in an inline script file, then the script tag could be returned.
+
+If you'd rather disable this behavior, set `ignore` to `false`.
+
 ### `getByAltText`
 
 ```typescript

src/__tests__/element-queries.js

@@ -512,4 +512,12 @@ test('get throws a useful error message without DOM in Cypress', () => {
   expect(() => getByValue('LucyRicardo')).toThrowErrorMatchingSnapshot()
 })
 
+test('getByText ignores script tags by default', () => {
+  const {getAllByText} = render('<script>Hello</script><div>Hello</div>')
+  const divOnly = getAllByText(/hello/i)
+  expect(divOnly).toHaveLength(1)
+  expect(divOnly[0].tagName).toBe('DIV')
+  expect(getAllByText(/hello/i, {ignore: false})).toHaveLength(2)
+})
+
 /* eslint jsx-a11y/label-has-for:0 */

src/queries.js

@@ -69,13 +69,19 @@ function queryByLabelText(...args) {
 function queryAllByText(
   container,
   text,
-  {selector = '*', exact = true, collapseWhitespace = true, trim = true} = {},
+  {
+    selector = '*',
+    exact = true,
+    collapseWhitespace = true,
+    trim = true,
+    ignore = 'script',
+  } = {},
 ) {
   const matcher = exact ? matches : fuzzyMatches
   const matchOpts = {collapseWhitespace, trim}
-  return Array.from(container.querySelectorAll(selector)).filter(node =>
-    matcher(getNodeText(node), node, text, matchOpts),
-  )
+  return Array.from(container.querySelectorAll(selector))
+    .filter(node => !ignore || !node.matches(ignore))
+    .filter(node => matcher(getNodeText(node), node, text, matchOpts))
 }
 
 function queryByText(...args) {