Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ getByText(
exact?: boolean = true,
collapseWhitespace?: boolean = true,
trim?: boolean = true,
ignore?: string|boolean = 'script'
}): HTMLElement
```

Expand All @@ -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
Expand Down
8 changes: 8 additions & 0 deletions src/__tests__/element-queries.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
14 changes: 10 additions & 4 deletions src/queries.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think script and style would be a better default.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea. I'll add that!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I'm just a couple minutes late...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries. I just pushed an update directly to master. I figured the overhead would be unnecessary.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great 👍

} = {},
) {
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) {
Expand Down