callstack__react-native-testing-library/static/js/async/8481.d464a0742f.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8481"],{7608(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),o=n(7425);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsxs)(s.h2,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"findBy*"})," queries are used to find elements that are not instantly available but will be added as a result of some asynchronous action. Learn more details ",(0,r.jsx)(s.a,{href:"/13.x/docs/api/queries.html#find-by",children:"here"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"  expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for the ",(0,r.jsx)(s.code,{children:"expectation"})," callback to pass. ",(0,r.jsx)(s.code,{children:"waitFor"})," may run the callback multiple times until the timeout is reached, as specified by the ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options. The callback must throw an error when the expectation isn't met. Returning any value, including a falsy one, is treated as meeting the expectation, and the callback result is returned to the caller of ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," executes the ",(0,r.jsx)(s.code,{children:"expectation"})," callback every ",(0,r.jsx)(s.code,{children:"interval"})," (default: every 50 ms) until ",(0,r.jsx)(s.code,{children:"timeout"})," (default: 1000 ms) is reached. The repeated execution stops as soon as it doesn't throw an error, and the value returned by the callback is returned to the ",(0,r.jsx)(s.code,{children:"waitFor"})," caller. Otherwise, when it reaches the timeout, the final error thrown by ",(0,r.jsx)(s.code,{children:"expectation"})," is re-thrown by ",(0,r.jsx)(s.code,{children:"waitFor"})," to the calling code."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ `waitFor` will return immediately because callback does not throw"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," is an async function, so you need to ",(0,r.jsx)(s.code,{children:"await"})," the result to pause test execution."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ missing `await`: `waitFor` will just return Promise that will be rejected when the timeout is reached"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nYou can enforce awaiting ",(0,r.jsx)(s.code,{children:"waitFor"})," by using the ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md",rel:"noopener noreferrer",target:"_blank",children:"await-async-utils"})," rule from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:"eslint-plugin-testing-library"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Since ",(0,r.jsx)(s.code,{children:"waitFor"})," is likely to run the ",(0,r.jsx)(s.code,{children:"expectation"})," callback multiple times, it's highly recommended ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor",rel:"noopener noreferrer",target:"_blank",children:"not to perform any side effects"})," in ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"  // ❌ button will be pressed on each waitFor iteration"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"  fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockOnPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nAvoiding side effects in ",(0,r.jsx)(s.code,{children:"expectation"})," callback can be partially enforced with the ",(0,r.jsxs)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"no-wait-for-side-effects"})," rule"]}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["It's also recommended to have a ",(0,r.jsxs)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback",rel:"noopener noreferrer",target:"_blank",children:["single assertion per each ",(0,r.jsx)(s.code,{children:"waitFor"})]})," for more consistency and faster failing tests. If you want to make several assertions, put them in separate ",(0,r.jsx)(s.code,{children:"waitFor"})," calls. In many cases you won't need to wrap the second assertion in ",(0,r.jsx)(s.code,{children:"waitFor"})," since the first one will do the waiting required for the asynchronous change to happen."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," checks whether Jest fake timers are enabled and adapts its behavior accordingly. The following snippet is a simplified version of how it behaves when fake timers are enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"  jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".advanceTimersByTime"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(interval);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"  try"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"    // resolve"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"    return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"catch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"    lastError "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" error;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// reject"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In the following example we test that a function is called after 10 seconds using fake timers. Since we're using fake timers, the test won't depend on real time passing and will be much faster and more reliable. We don't have to advance fake timers through Jest fake timers API because ",(0,r.jsx)(s.code,{children:"waitFor"})," already does this for us."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in component"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"  someFunction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in test"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(someFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/13.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})}),"\n",(0,r.jsxs)(s.h2,{id:"waitforelementtoberemoved",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"  expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"  options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits until the queried element is removed or times out. ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," periodically calls ",(0,r.jsx)(s.code,{children:"expectation"})," every ",(0,r.jsx)(s.code,{children:"interval"})," milliseconds to determine whether the element has been removed or not."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForElementToBeRemoved } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waiting for an Banana to be removed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"  render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Banana"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Banana ready'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"This method expects the element to be initially present in the render tree and then removed from it. If the element isn't present when you call this method, it throws an error."}),"\n",(0,r.jsxs)(s.p,{children:["You can use any of ",(0,r.jsx)(s.code,{children:"getBy"}),", ",(0,r.jsx)(s.code,{children:"getAllBy"}),", ",(0,r.jsx)(s.code,{children:"queryBy"}),", and ",(0,r.jsx)(s.code,{children:"queryAllBy"})," queries for the ",(0,r.jsx)(s.code,{children:"expectation"})," parameter."]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/13.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fmisc%2Fasync.mdx"]={toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2},{id:"waitfor",text:"`waitFor`",depth:2},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2}],title:"Async utilities",headingTitle:"Async utilities",frontmatter:{}}}}]);