@testing-library/dom version: latest master- Testing Framework and version: node, jest 12.x, 26.x
- DOM Environment:
Relevant code or config:
test('foo', () => {
renderIntoDocument(` <svg>
<title data-testid="svg">Close</title>
<g><path /></g>
</svg>`)
screen.debug(screen.getByText('Close'))
})
What you did:
called screen.getByText
What happened:
I got back the title... but shouldn't getByText be accessible to everyone? If it's hidden, it won't be accessible to sighted users.
Reproduction:
Problem description:
Suggested solution:
have getByText ignore
elements.</p>
<p><!--<br />
It's ok if you don't have a suggested solution, but it really helps if you could<br />
do a little digging to come up with some suggestion of how to improve things.<br />
--></p>
</div>
<div>
<div class="float-right">
<a class="text-muted" href="https://www.github.com/testing-library/dom-testing-library/issues/593" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars3.githubusercontent.com/u/399236?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
<strong>benmonro</strong>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div id="ph-above-best-comment"> </div>
</div>
<div class="col-12 mb-4 best-comment">
<div>
<h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2>
</div>
<div class="card card-custom border-lg-success mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>This change of mind brought to you by: <a rel="nofollow noopener" target="_blank" href="https://github.com/testing-library/cypress-testing-library/issues/134">https://github.com/testing-library/cypress-testing-library/issues/134</a></p>
<p>In fact, the original reason for <code>ignore</code> was because <code>getByText</code> was getting me translation text that was served up in the <code>script</code> tag for my app when using cypress 馃槄 Seems it would make sense to add some other tags now that I think about it.</p>
<p>Anyone wanna do this?</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/1500684?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture">
<strong>kentcdodds</strong>
<span class="text-muted ml-1">on 29 May 2020</span>
</div>
<div class="col text-right">
👍<span class="ml-2 mr-3">2</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="mb-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="9295564578"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="col-12 d-flex align-items-center mb-4">
<h2>All 11 comments</h2>
</div>
<div class="col-12">
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>There are a lot of situations where you could get an element back that's hidden:</p>
<pre><code class="prettyprint">// <div style="display:none;">Hi</div>
screen.getByText(/hi/i) // <div....
</code></pre>
<p>I'm not sure whether we can deliver on the promise that we'll never return you something that's not hidden (though <code>*ByRole</code> does a pretty good job of that).</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/1500684?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kentcdodds picture">
<strong>kentcdodds</strong>
<span class="text-muted ml-1">on 29 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>true, but in this case it's not just a styling thing. afaik the browser will never show the text of a <title> element. title is semantically different than text no? anyway only reason this came up was because in the suggestions feature I tried to add a test for it (because it's actually listed in the examples when i went thru 'which query should i use" and i realized that getByTitle will _ALWAYS_ be recommending getByText when you use <title>... which seemed kinda strange to me </p>
<p>anyway food for thought. :)</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars3.githubusercontent.com/u/399236?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benmonro picture">
<strong>benmonro</strong>
<span class="text-muted ml-1">on 29 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>What about <code><meta></code> tags and stuff? 馃 We could probably just update this:</p>
<p><a rel="nofollow noopener" target="_blank" href="https://github.com/testing-library/dom-testing-library/blob/4fb00936cbf5b0d715f5b54d16576dc3bfe20460/src/queries/text.js#L17">https://github.com/testing-library/dom-testing-library/blob/4fb00936cbf5b0d715f5b54d16576dc3bfe20460/src/queries/text.js#L17</a></p>
<p>Should be pretty easy actually...</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/1500684?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kentcdodds picture">
<strong>kentcdodds</strong>
<span class="text-muted ml-1">on 29 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>This change of mind brought to you by: <a rel="nofollow noopener" target="_blank" href="https://github.com/testing-library/cypress-testing-library/issues/134">https://github.com/testing-library/cypress-testing-library/issues/134</a></p>
<p>In fact, the original reason for <code>ignore</code> was because <code>getByText</code> was getting me translation text that was served up in the <code>script</code> tag for my app when using cypress 馃槄 Seems it would make sense to add some other tags now that I think about it.</p>
<p>Anyone wanna do this?</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/1500684?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kentcdodds picture">
<strong>kentcdodds</strong>
<span class="text-muted ml-1">on 29 May 2020</span>
</div>
<div class="col text-right">
👍<span class="ml-2 mr-3">2</span>
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>Ah I see what you mean <strong>@kentcdodds</strong> this is easy to fix. What other tags do you think should be ignored by default? I can fix it as suggestions would need the same change.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars3.githubusercontent.com/u/399236?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benmonro picture">
<strong>benmonro</strong>
<span class="text-muted ml-1">on 30 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="mb-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="3731713875"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>I don't know for sure. Would take a little bit of research.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/1500684?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kentcdodds picture">
<strong>kentcdodds</strong>
<span class="text-muted ml-1">on 30 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>alright. i can try and see what i find and report back. somewhat related, what do you think of <code>getByTitle</code> returning the parent <code>svg</code> item rather than the title itself? seems a bit odd to me that if i did <code>getByTitle("foo")</code> on this:</p>
<pre><code class="prettyprint"><svg onclick="..."><title>foo</title><path /></svg>
</code></pre>
<p>that it returns the <code><title></code> instead of the <code><svg></code></p>
<p>especially when i want to do <code>fireEvent.click(getByTitle("foo"))</code></p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars3.githubusercontent.com/u/399236?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benmonro picture">
<strong>benmonro</strong>
<span class="text-muted ml-1">on 30 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>Honestly, I can't remember why we added that one and I don't use it myself so my understanding of the implications of removing it is limited. If you could do some archeology on that too figure out what use cases it's intended for them we can make a more informed decision.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/1500684?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kentcdodds picture">
<strong>kentcdodds</strong>
<span class="text-muted ml-1">on 31 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>I actually am using it to check for the presence of svg so I do think we should keep it. I'm just saying it should return the element it's a title for rather than the title element itself. Just like how get by label text will return the input element rather than the label.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars3.githubusercontent.com/u/399236?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="benmonro picture">
<strong>benmonro</strong>
<span class="text-muted ml-1">on 31 May 2020</span>
</div>
<div class="col text-right">
👍<span class="ml-2 mr-3">1</span>
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>That makes sense to me. Let's just make sure we understand the reason it was created so we don't miss something.</p>
<p>Also, this would be a breaking change. Perhaps we could make a new query <code>*ByTitleText</code> and deprecated <code>*ByTitle</code>. I prefer that option personally.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars0.githubusercontent.com/u/1500684?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="kentcdodds picture">
<strong>kentcdodds</strong>
<span class="text-muted ml-1">on 31 May 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown">
<p>I am chiming in here as someone who has a similar problem. I am testing for the display of an svg using <code>jest-dom</code> matcher <code>.toBeVisible</code>. This matcher checks for the presence of attributes such as <code>visibility</code> <a rel="nofollow noopener" target="_blank" href="https://github.com/testing-library/jest-dom/blob/master/src/to-be-visible.js">https://github.com/testing-library/jest-dom/blob/master/src/to-be-visible.js</a>, and we use the 'visibility' attribute for svgs. Since <code>getByTitle</code> returns the title, not the SVG element, I can not use the matcher to test for visibility.</p>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<img src="https://avatars3.githubusercontent.com/u/25602177?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="andreasandpiper picture">
<strong>andreasandpiper</strong>
<span class="text-muted ml-1">on 27 Aug 2020</span>
</div>
<div class="col text-right">
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card card-custom mb-4">
<div class="card-body pt-3 pb-3 markdown text-center helpful">
<div class="title">Was this page helpful?</div>
<div class="mt-1" onMouseLeave="rating(627322462, 0);">
<i class="fas fa-star inactive" id="star-1" onMouseOver="rating(627322462, 1);" onclick="rate(627322462, 1);"></i>
<i class="fas fa-star inactive" id="star-2" onMouseOver="rating(627322462, 2);" onclick="rate(627322462, 2);"></i>
<i class="fas fa-star inactive" id="star-3" onMouseOver="rating(627322462, 3);" onclick="rate(627322462, 3);"></i>
<i class="fas fa-star inactive" id="star-4" onMouseOver="rating(627322462, 4);" onclick="rate(627322462, 4);"></i>
<i class="fas fa-star inactive" id="star-5" onMouseOver="rating(627322462, 5);" onclick="rate(627322462, 5);"></i>
</div>
<div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div>
</div>
</div>
<div class="mb-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="3452512275"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div id="ph-above-related"></div>
<div class="card card-custom issue-box">
<div class="card-body pt-3 pb-5">
<h2 class="mb-4">Related issues</h2>
<div>
<strong>
<a href="/dom-testing-library/356965001/add-new-getbyrole-queryselector">Add new getByRole queryselector.</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars2.githubusercontent.com/u/777527?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="JeffBaumgardt picture">
<strong class="pr-1" dir="ltr">JeffBaumgardt</strong>
路
<span class="px-1" dir="ltr">4</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/dom-testing-library/312288937/querybytestid-getbytestid-use-partial-case-insensitive-text">`queryByTestId`, `getByTestId` use partial case-insensitive text match by default, which is unexpected</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars2.githubusercontent.com/u/498274?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="sompylasar picture">
<strong class="pr-1" dir="ltr">sompylasar</strong>
路
<span class="px-1" dir="ltr">3</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/dom-testing-library/446783785/add-semantic-html-elements-implicit-role-support-to">Add semantic HTML elements implicit role support to queryByRole/getByRole selectors</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars0.githubusercontent.com/u/3720079?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="szabototo89 picture">
<strong class="pr-1" dir="ltr">szabototo89</strong>
路
<span class="px-1" dir="ltr">4</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/dom-testing-library/461475346/jest-usefaketimers-breaks-waitfordomchange-waitforelement">jest.useFakeTimers() breaks waitForDomChange, waitForElement, waitForElementToBeRemoved due to setTimeout </a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars0.githubusercontent.com/u/13363196?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="LaurensBosscher picture">
<strong class="pr-1" dir="ltr">LaurensBosscher</strong>
路
<span class="px-1" dir="ltr">4</span><span>Comments</span>
</div>
<hr />
<div>
<strong>
<a href="/dom-testing-library/312670878/getbylabeltext-does-not-match-when-id-has-a-in-the-string">getByLabelText does not match when id has a "." in the string.</a>
</strong>
</div>
<div class="text-muted text-small mt-2">
<img src="https://avatars3.githubusercontent.com/u/228987?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ngbrown picture">
<strong class="pr-1" dir="ltr">ngbrown</strong>
路
<span class="px-1" dir="ltr">4</span><span>Comments</span>
</div>
</div>
</div>
<div class="sticky-top pt-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="3919948963"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="ph-below-related-2" class="mt-4">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="3919948963"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
</div>
</div>
<div class="skyscraper-container">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3835332123789605"
data-ad-slot="7879185320"
data-ad-format="vertical"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="mt-5 spacer"></div>
<footer class="mt-5 pb-2 py-4 text-center mt-auto">
<div class="container">
<a class="navbar-brand logo mr-5" href="/">
<img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo">
bleeping<strong>coder</strong>
</a>
<div class="mt-4">
bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div>
<div>
Source for this page: <a href="https://www.github.com/testing-library/dom-testing-library/issues/593" rel="nofollow noreferrer" target="_blank">Source</a>
</div>
</div>
<hr class="mb-5 mt-5">
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg mb-sm-0 mb-5">
<strong>Popular programming languages</strong>
<ul class="list-unstyled mb-0 mt-2">
<li class="mb-2">
<a href="/python" dir="ltr">Python</a>
</li>
<li class="mb-2">
<a href="/javascript" dir="ltr">JavaScript</a>
</li>
<li class="mb-2">
<a href="/typescript" dir="ltr">TypeScript</a>
</li>
<li class="mb-2">
<a href="/cpp" dir="ltr">C++</a>
</li>
<li class="mb-2">
<a href="/csharp" dir="ltr">C#</a>
</li>
</ul>
</div>
<div class="col-sm-4 col-lg mb-sm-0 mb-5">
<strong>Popular GitHub projects</strong>
<ul class="list-unstyled mb-0 mt-2">
<li class="mb-2">
<a href="/microsoft/vscode" dir="ltr">vscode</a>
</li>
<li class="mb-2">
<a href="/numpy/numpy" dir="ltr">numpy</a>
</li>
<li class="mb-2">
<a href="/ant-design/ant-design" dir="ltr">ant-design</a>
</li>
<li class="mb-2">
<a href="/mui-org/material-ui" dir="ltr">material-ui</a>
</li>
<li class="mb-2">
<a href="/vercel/next-js" dir="ltr">next.js</a>
</li>
</ul>
</div>
<div class="col-sm-4 col-lg mb-0">
<strong>More GitHub projects</strong>
<ul class="list-unstyled mb-0 mt-2">
<li class="mb-2">
<a href="/rust-lang/rust" dir="ltr">rust</a>
</li>
<li class="mb-2">
<a href="/moment/moment" dir="ltr">moment</a>
</li>
<li class="mb-2">
<a href="/yarnpkg/yarn" dir="ltr">yarn</a>
</li>
<li class="mb-2">
<a href="/mozilla/pdf-js" dir="ltr">pdf.js</a>
</li>
<li class="mb-2">
<a href="/JuliaLang/julia" dir="ltr">julia</a>
</li>
</ul>
</div>
</div>
</div>
<hr class="mb-5 mt-5">
<div class="container text-muted">
漏 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br />
By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>.
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>-->
<script type="text/javascript" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body>
</html>