callstack__react-native-testing-library/static/js/async/2755.e189cf0d84.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["2755"],{2190(s,e,n){n.r(e),n.d(e,{default:()=>t});var r=n(4848),o=n(8453);function i(s){let e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"introduction",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsxs)(e.h2,{id:"the-problem",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#the-problem",children:"#"}),"The problem"]}),"\n",(0,r.jsx)(e.p,{children:"You want to write maintainable tests for your React Native components. As a part of this goal, you want your tests to avoid including implementation details of your components and focus on making your tests give you the confidence they are intended. As part of this, you want your tests to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down."}),"\n",(0,r.jsxs)(e.h2,{id:"this-solution",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#this-solution",children:"#"}),"This solution"]}),"\n",(0,r.jsxs)(e.p,{children:["The React Native Testing Library (RNTL) is a comprehensive solution for testing React Native components. It provides React Native runtime simulation on top of ",(0,r.jsx)(e.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),", in a way that encourages better testing practices. Its primary guiding principle is:"]}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsx)(e.p,{children:"The more your tests resemble how your software is used, the more confidence they can give you."}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["This project is inspired by ",(0,r.jsx)(e.a,{href:"https://github.com/testing-library/react-testing-library",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),". It is tested to work with Jest, but it should work with other test runners as well."]}),"\n",(0,r.jsxs)(e.h2,{id:"example",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { QuestionsBoard } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../QuestionsBoard'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'form submits two answers'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" questions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'q1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'q2'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onSubmit"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"QuestionsBoard"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" questions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{questions} "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"onSubmit"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onSubmit} />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" answerInputs"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'answer input'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(answerInputs["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'a1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(answerInputs["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'a2'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"  await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"  expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onSubmit)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"    1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { q"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'q1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" a"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'a1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"    2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { q"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'q2'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" a"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'a2'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"  });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["You can find the source of the ",(0,r.jsx)(e.code,{children:"QuestionsBoard"})," component and this example ",(0,r.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/blob/main/src/__tests__/questionsBoard.test.tsx",rel:"noopener noreferrer",target:"_blank",children:"here"}),"."]})]})}function t(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fstart%2Fintro.md"]={toc:[{id:"the-problem",text:"The problem",depth:2},{id:"this-solution",text:"This solution",depth:2},{id:"example",text:"Example",depth:2}],title:"Introduction",headingTitle:"Introduction",frontmatter:{}}}}]);