https://testing-library.com/assets/js/7d43e6eb.faa08e89.js

1"use strict";(self.webpackChunkreact_testing_library_docs=self.webpackChunkreact_testing_library_docs||[]).push([[6492],{3905:(e,t,n)=>{n.d(t,{Zo:()=>c,kt:()=>m});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=r.createContext({}),s=function(e){var t=r.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=s(e.components);return r.createElement(u.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,u=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),d=s(n),m=a,b=d["".concat(u,".").concat(m)]||d[m]||p[m]||l;return n?r.createElement(b,o(o({ref:t},c),{},{components:n})):r.createElement(b,o({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=d;var i={};for(var u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:a,o[1]=i;for(var s=2;s<l;s++)o[s]=n[s];return r.createElement.apply(null,o)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},5162:(e,t,n)=>{n.d(t,{Z:()=>o});var r=n(7294),a=n(6010);const l="tabItem_Ymn6";function o(e){var t=e.children,n=e.hidden,o=e.className;return r.createElement("div",{role:"tabpanel",className:(0,a.Z)(l,o),hidden:n},t)}},5488:(e,t,n)=>{n.d(t,{Z:()=>m});var r=n(7462),a=n(7294),l=n(6010),o=n(2389),i=n(7392),u=n(7094),s=n(2466);const c="tabList__CuJ",p="tabItem_LNqP";function d(e){var t,n,o=e.lazy,d=e.block,m=e.defaultValue,b=e.values,y=e.groupId,f=e.className,v=a.Children.map(e.children,(function(e){if((0,a.isValidElement)(e)&&"value"in e.props)return e;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')})),h=null!=b?b:v.map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes}})),g=(0,i.l)(h,(function(e,t){return e.value===t.value}));if(g.length>0)throw new Error('Docusaurus error: Duplicate values "'+g.map((function(e){return e.value})).join(", ")+'" found in <Tabs>. Every value needs to be unique.');var k=null===m?m:null!=(t=null!=m?m:null==(n=v.find((function(e){return e.props.default})))?void 0:n.props.value)?t:v[0].props.value;if(null!==k&&!h.some((function(e){return e.value===k})))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+k+'" but none of its children has the corresponding value. Available values are: '+h.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");var x=(0,u.U)(),T=x.tabGroupChoices,N=x.setTabGroupChoices,w=(0,a.useState)(k),O=w[0],C=w[1],E=[],q=(0,s.o5)().blockElementScrollPositionUntilNextRender;if(null!=y){var B=T[y];null!=B&&B!==O&&h.some((function(e){return e.value===B}))&&C(B)}var j=function(e){var t=e.currentTarget,n=E.indexOf(t),r=h[n].value;r!==O&&(q(t),C(r),null!=y&&N(y,String(r)))},I=function(e){var t,n=null;switch(e.key){case"ArrowRight":var r,a=E.indexOf(e.currentTarget)+1;n=null!=(r=E[a])?r:E[0];break;case"ArrowLeft":var l,o=E.indexOf(e.currentTarget)-1;n=null!=(l=E[o])?l:E[E.length-1]}

1null==(t=n)||t.focus()};return a.createElement("div",{className:(0,l.Z)("tabs-container",c)},a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,l.Z)("tabs",{"tabs--block":d},f)},h.map((function(e){var t=e.value,n=e.label,o=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:O===t?0:-1,"aria-selected":O===t,key:t,ref:function(e){return E.push(e)},onKeyDown:I,onFocus:j,onClick:j},o,{className:(0,l.Z)("tabs__item",p,null==o?void 0:o.className,{"tabs__item--active":O===t})}),null!=n?n:t)}))),o?(0,a.cloneElement)(v.filter((function(e){return e.props.value===O}))[0],{className:"margin-top--md"}):a.createElement("div",{className:"margin-top--md"},v.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==O})}))))}function m(e){var t=(0,o.Z)();return a.createElement(d,(0,r.Z)({key:String(t)},e))}},2162:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>y,frontMatter:()=>s,metadata:()=>p,toc:()=>m});var r=n(7462),a=n(3366),l=(n(7294),n(3905)),o=n(5488),i=n(5162),u=["components"],s={id:"bytext",title:"ByText"},c=void 0,p={unversionedId:"queries/bytext",id:"queries/bytext",title:"ByText",description:"getByText, queryByText, getAllByText, queryAllByText, findByText,",source:"@site/docs/queries/bytext.mdx",sourceDirName:"queries",slug:"/queries/bytext",permalink:"/docs/queries/bytext",draft:!1,editUrl:"https://github.com/testing-library/testing-library-docs/edit/main/docs/queries/bytext.mdx",tags:[],version:"current",lastUpdatedBy:"Tim Deschryver",lastUpdatedAt:1694408753,formattedLastUpdatedAt:"Sep 11, 2023",frontMatter:{id:"bytext",title:"ByText"},sidebar:"docs",previous:{title:"ByPlaceholderText",permalink:"/docs/queries/byplaceholdertext"},next:{title:"ByDisplayValue",permalink:"/docs/queries/bydisplayvalue"}},d={},m=[{value:"API",id:"api",level:2},{value:"Options",id:"options",level:2},{value:"<code>selector</code>",id:"selector",level:3},{value:"<code>ignore</code>",id:"ignore",level:3}],b={toc:m};function y(e){var t=e.components,n=(0,a.Z)(e,u);return(0,l.kt)("wrapper",(0,r.Z)({},b,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"getByText, queryByText, getAllByText, queryAllByText, findByText,\nfindAllByText")),(0,l.kt)("h2",{id:"api"},"API"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-typescript"},"getByText(\n  // If you're using `screen`, then skip the container argument:\n  container: HTMLElement,\n  text: TextMatch,\n  options?: {\n    selector?: string = '*',\n    exact?: boolean = true,\n    ignore?: string|boolean = 'script, style',\n    normalizer?: NormalizerFn,\n  }): HTMLElement\n")),(0,l.kt)("p",null,"This will search for all elements that have a text node with ",(0,l.kt)("inlineCode",{parentName:"p"},"textContent"),"\nmatching the given ",(0,l.kt)("a",{parentName:"p",href:"/docs/queries/about#textmatch"},(0,l.kt)("inlineCode",{parentName:"a"},"TextMatch")),"."),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html"},'<a href="/about">About \u2139\ufe0f</a>\n')),(0,l.kt)(o.Z,{defaultValue:"native",values:[{label:"Native",value:"native"},{label:"React",value:"react"},{label:"Angular",value:"angular"},{label:"Cypress",value:"cypress"}],mdxType:"Tabs"},(0,l.kt)(i.Z,{value:"native",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"import {screen} from '@testing-library/dom'\n\nconst aboutAnchorNode = screen.getByText(/about/i)\n"))),(0,l.kt)(i.Z,{value:"react",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-jsx"},"import {render, screen} from '@testing-library/react'\n\nrender(<MyComponent />)\nconst aboutAnchorNode = screen.getByText(/about/i)\n"))),(0,l.kt)(i.Z,{value:"angular",mdxType:"TabItem"},(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-ts"},"import {render, screen} from '@testing-library/angular'\n\nawait render(MyComponent)\nconst aboutAnchorNode = screen.getByText(/about/i)\n"))),(0,l.kt)(i.Z,{value:"cypress",mdxType:"TabItem"}

1,(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"cy.findByText(/about/i).should('exist')\n")))),(0,l.kt)("p",null,"It also works with ",(0,l.kt)("inlineCode",{parentName:"p"},"input"),"s whose ",(0,l.kt)("inlineCode",{parentName:"p"},"type")," attribute is either ",(0,l.kt)("inlineCode",{parentName:"p"},"submit")," or\n",(0,l.kt)("inlineCode",{parentName:"p"},"button"),":"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},'<input type="submit" value="Send data" />\n')),(0,l.kt)("h2",{id:"options"},"Options"),(0,l.kt)("p",null,(0,l.kt)("a",{parentName:"p",href:"/docs/queries/about#textmatch"},"TextMatch")," options, plus the following:"),(0,l.kt)("h3",{id:"selector"},(0,l.kt)("inlineCode",{parentName:"h3"},"selector")),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},(0,l.kt)("strong",{parentName:"p"},"Note")),(0,l.kt)("p",{parentName:"blockquote"},"See ",(0,l.kt)("a",{parentName:"p",href:"/docs/queries/bylabeltext#selector"},(0,l.kt)("inlineCode",{parentName:"a"},"getByLabelText"))," for more details on\nhow and when to use the ",(0,l.kt)("inlineCode",{parentName:"p"},"selector")," option")),(0,l.kt)("h3",{id:"ignore"},(0,l.kt)("inlineCode",{parentName:"h3"},"ignore")),(0,l.kt)("p",null,"The ",(0,l.kt)("inlineCode",{parentName:"p"},"ignore")," option accepts a query selector. If the\n",(0,l.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/Element/matches"},(0,l.kt)("inlineCode",{parentName:"a"},"node.matches")),"\nreturns true for that selector, the node will be ignored. This defaults to\n",(0,l.kt)("inlineCode",{parentName:"p"},"'script, style'")," because generally you don't want to select these tags, but if\nyour content is in an inline script file, then the script tag could be returned."),(0,l.kt)("p",null,"If you'd rather disable this behavior, set ",(0,l.kt)("inlineCode",{parentName:"p"},"ignore")," to ",(0,l.kt)("inlineCode",{parentName:"p"},"false"),"."))}y.isMDXComponent=!0}}]);