Skip to content

Commit 4b2228e

Browse files
author
davidsa
committed
feat(config): add showLogOnfail config option to configure
 logging Closes #360
1 parent cf57dcd commit 4b2228e

File tree

4 files changed

+235
-1
lines changed

4 files changed

+235
-1
lines changed

‎src/__tests__/__snapshots__/get-by-errors.js.snap

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`getAllByAltText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the alt text: TEST QUERY"`;
4+
5+
exports[`getAllByAltText query will throw expected error message when config.showLogOnFail is true 1`] = `
6+
"Unable to find an element with the alt text: TEST QUERY
7+
8+
<body>
9+
<div>
10+
Hello
11+
</div>
12+
</body>"
13+
`;
14+
15+
exports[`getAllByDisplayValue query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the display value: TEST QUERY."`;
16+
17+
exports[`getAllByDisplayValue query will throw expected error message when config.showLogOnFail is true 1`] = `
18+
"Unable to find an element with the display value: TEST QUERY.
19+
20+
<body>
21+
<div>
22+
Hello
23+
</div>
24+
</body>"
25+
`;
26+
27+
exports[`getAllByLabelText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find a label with the text of: TEST QUERY"`;
28+
29+
exports[`getAllByLabelText query will throw expected error message when config.showLogOnFail is true 1`] = `
30+
"Unable to find a label with the text of: TEST QUERY
31+
32+
<body>
33+
<div>
34+
Hello
35+
</div>
36+
</body>"
37+
`;
38+
39+
exports[`getAllByPlaceholderText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the placeholder text of: TEST QUERY"`;
40+
41+
exports[`getAllByPlaceholderText query will throw expected error message when config.showLogOnFail is true 1`] = `
42+
"Unable to find an element with the placeholder text of: TEST QUERY
43+
44+
<body>
45+
<div>
46+
Hello
47+
</div>
48+
</body>"
49+
`;
50+
51+
exports[`getAllByRole query will throw expected error message when config.showLogOnFail is false 1`] = `
52+
"Unable to find an accessible element with the role \\"TEST QUERY\\"
53+
54+
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"
55+
`;
56+
57+
exports[`getAllByRole query will throw expected error message when config.showLogOnFail is true 1`] = `
58+
"Unable to find an accessible element with the role "TEST QUERY"
59+
60+
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
61+
62+
<body>
63+
<div>
64+
Hello
65+
</div>
66+
</body>"
67+
`;
68+
69+
exports[`getAllByTestId query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element by: [data-testid=\\"TEST QUERY\\"]"`;
70+
71+
exports[`getAllByTestId query will throw expected error message when config.showLogOnFail is true 1`] = `
72+
"Unable to find an element by: [data-testid="TEST QUERY"]
73+
74+
<body>
75+
<div>
76+
Hello
77+
</div>
78+
</body>"
79+
`;
80+
81+
exports[`getAllByText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the text: TEST QUERY. 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."`;
82+
83+
exports[`getAllByText query will throw expected error message when config.showLogOnFail is true 1`] = `
84+
"Unable to find an element with the text: TEST QUERY. 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.
85+
86+
<body>
87+
<div>
88+
Hello
89+
</div>
90+
</body>"
91+
`;
92+
93+
exports[`getAllByTitle query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the title: TEST QUERY."`;
94+
95+
exports[`getAllByTitle query will throw expected error message when config.showLogOnFail is true 1`] = `
96+
"Unable to find an element with the title: TEST QUERY.
97+
98+
<body>
99+
<div>
100+
Hello
101+
</div>
102+
</body>"
103+
`;
104+
105+
exports[`getByAltText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the alt text: TEST QUERY"`;
106+
107+
exports[`getByAltText query will throw expected error message when config.showLogOnFail is true 1`] = `
108+
"Unable to find an element with the alt text: TEST QUERY
109+
110+
<body>
111+
<div>
112+
Hello
113+
</div>
114+
</body>"
115+
`;
116+
117+
exports[`getByDisplayValue query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the display value: TEST QUERY."`;
118+
119+
exports[`getByDisplayValue query will throw expected error message when config.showLogOnFail is true 1`] = `
120+
"Unable to find an element with the display value: TEST QUERY.
121+
122+
<body>
123+
<div>
124+
Hello
125+
</div>
126+
</body>"
127+
`;
128+
129+
exports[`getByLabelText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find a label with the text of: TEST QUERY"`;
130+
131+
exports[`getByLabelText query will throw expected error message when config.showLogOnFail is true 1`] = `
132+
"Unable to find a label with the text of: TEST QUERY
133+
134+
<body>
135+
<div>
136+
Hello
137+
</div>
138+
</body>"
139+
`;
140+
141+
exports[`getByPlaceholderText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the placeholder text of: TEST QUERY"`;
142+
143+
exports[`getByPlaceholderText query will throw expected error message when config.showLogOnFail is true 1`] = `
144+
"Unable to find an element with the placeholder text of: TEST QUERY
145+
146+
<body>
147+
<div>
148+
Hello
149+
</div>
150+
</body>"
151+
`;
152+
153+
exports[`getByRole query will throw expected error message when config.showLogOnFail is false 1`] = `
154+
"Unable to find an accessible element with the role \\"TEST QUERY\\"
155+
156+
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"
157+
`;
158+
159+
exports[`getByRole query will throw expected error message when config.showLogOnFail is true 1`] = `
160+
"Unable to find an accessible element with the role "TEST QUERY"
161+
162+
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
163+
164+
<body>
165+
<div>
166+
Hello
167+
</div>
168+
</body>"
169+
`;
170+
171+
exports[`getByTestId query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element by: [data-testid=\\"TEST QUERY\\"]"`;
172+
173+
exports[`getByTestId query will throw expected error message when config.showLogOnFail is true 1`] = `
174+
"Unable to find an element by: [data-testid="TEST QUERY"]
175+
176+
<body>
177+
<div>
178+
Hello
179+
</div>
180+
</body>"
181+
`;
182+
183+
exports[`getByText query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the text: TEST QUERY. 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."`;
184+
185+
exports[`getByText query will throw expected error message when config.showLogOnFail is true 1`] = `
186+
"Unable to find an element with the text: TEST QUERY. 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.
187+
188+
<body>
189+
<div>
190+
Hello
191+
</div>
192+
</body>"
193+
`;
194+
195+
exports[`getByTitle query will throw expected error message when config.showLogOnFail is false 1`] = `"Unable to find an element with the title: TEST QUERY."`;
196+
197+
exports[`getByTitle query will throw expected error message when config.showLogOnFail is true 1`] = `
198+
"Unable to find an element with the title: TEST QUERY.
199+
200+
<body>
201+
<div>
202+
Hello
203+
</div>
204+
</body>"
205+
`;

‎src/__tests__/get-by-errors.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import cases from 'jest-in-case'
2+
import {queries, screen} from '../'
3+
import {configure, getConfig} from '../config'
24
import {render} from './helpers/test-utils'
35

6+
const originalConfig = getConfig()
7+
beforeEach(() => {
8+
configure(originalConfig)
9+
})
10+
411
cases(
512
'getBy* queries throw an error when there are multiple elements returned',
613
({name, query, html}) => {
@@ -39,6 +46,21 @@ cases(
3946
},
4047
)
4148

49+
const getQueries = Object.keys(queries).filter(q => q.startsWith('get'))
50+
test.each(
51+
getQueries.reduce((acc, query) => {
52+
acc.push([query, true], [query, false])
53+
return acc
54+
}, []),
55+
)(
56+
'%s query will throw expected error message when config.showLogOnFail is %s',
57+
(query, showLogOnFail) => {
58+
configure({showLogOnFail})
59+
document.body.innerHTML = '<div>Hello</div>'
60+
expect(() => screen[query]('TEST QUERY')).toThrowErrorMatchingSnapshot()
61+
},
62+
)
63+
4264
cases(
4365
'queryBy* queries throw an error when there are multiple elements returned',
4466
({name, query, html}) => {

‎src/config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ let config = {
1414
asyncWrapper: cb => cb(),
1515
// default value for the `hidden` option in `ByRole` queries
1616
defaultHidden: false,
17+
18+
// should the DOM be logged to the console when getBy* or getAllBy* query fail
19+
showLogOnFail: true,
1720
}
1821

1922
export function configure(newConfig) {

‎src/query-helpers.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import {prettyDOM} from './pretty-dom'
22
import {fuzzyMatches, matches, makeNormalizer} from './matches'
33
import {waitForElement} from './wait-for-element'
4+
import {getConfig} from './config'
45

56
function getElementError(message, container) {
6-
return new Error([message, prettyDOM(container)].filter(Boolean).join('\n\n'))
7+
const errorMessages = getConfig().showLogOnFail
8+
? [message, prettyDOM(container)]
9+
: [message]
10+
return new Error(errorMessages.filter(Boolean).join('\n\n'))
711
}
812

913
function getMultipleElementsFoundError(message, container) {

0 commit comments

Comments
 (0)