Skip to content

fix: log ignored selectors correctly on error #1141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 9, 2022
Merged

fix: log ignored selectors correctly on error #1141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
977d5ad
fix: log ignored selectors correctly on error
robin-drexler Jun 22, 2022
79d5c04
Merge branch 'main' into fix-get-element-error
eps1lon Aug 9, 2022
a203ff0
Ensure getElementError can be called without bound config
eps1lon Aug 9, 2022
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
59 changes: 41 additions & 18 deletions src/__tests__/element-queries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ensure tests don't rely on previous tests changing the config in a certain way.

})

test('query can return null', () => {
const {
queryByLabelText,
Expand Down Expand Up @@ -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>
Expand All @@ -44,15 +54,15 @@ 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>
`)
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>
Expand All @@ -61,31 +71,31 @@ 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>
`)
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>
`)
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>
`)
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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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"
Expand All @@ -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>


Expand Down Expand Up @@ -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>


Expand Down Expand Up @@ -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>


Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

New test that proves that overriding defaultIgnore produces a new error message

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(`
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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>


Expand Down
Loading