callstack__react-native-testing-library/static/js/async/4064.51bb89469f.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4064"],{2912(e,s,n){n.r(s),n.d(s,{default:()=>t});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"third-party-library-integration",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#third-party-library-integration",children:"#"}),"Third-Party Library Integration"]}),"\n",(0,r.jsx)(s.p,{children:"The React Native Testing Library is designed to simulate the core behaviors of React Native. However, it does not replicate the internal logic of third-party libraries. This guide explains how to integrate your library with RNTL."}),"\n",(0,r.jsxs)(s.h2,{id:"handling-events-in-third-party-libraries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#handling-events-in-third-party-libraries",children:"#"}),"Handling Events in Third-Party Libraries"]}),"\n",(0,r.jsx)(s.p,{children:"RNTL provides two subsystems to simulate events:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Fire Event"}),": A lightweight simulation system that can trigger event handlers defined on both host and composite components."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"User Event"}),": A more realistic interaction simulation system that can trigger event handlers defined only on host components."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["In many third-party libraries, event handling involves native code, which means RNTL cannot fully simulate the event flow, as it runs only JavaScript code. To address this limitation, you can use ",(0,r.jsx)(s.code,{children:"testOnly_on*"})," props on host components to expose custom events to RNTL’s event subsystems. Both subsystems will first attempt to locate the standard ",(0,r.jsx)(s.code,{children:"on*"})," event handlers; if these are not available, they fall back to the ",(0,r.jsx)(s.code,{children:"testOnly_on*"})," handlers."]}),"\n",(0,r.jsxs)(s.h3,{id:"example-react-native-gesture-handler",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-react-native-gesture-handler",children:"#"}),"Example: React Native Gesture Handler"]}),"\n",(0,r.jsxs)(s.p,{children:["React Native Gesture Handler (RNGH) provides a composite ",(0,r.jsx)(s.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/docs/components/pressable/",rel:"noopener noreferrer",target:"_blank",children:"Pressable"})," component with ",(0,r.jsx)(s.code,{children:"onPress*"})," props. These event handlers are not exposed on the rendered host views; instead, they are invoked via RNGH’s internal event flow, which involves native modules. As a result, they are not accessible to RNTL’s event subsystems."]}),"\n",(0,r.jsxs)(s.p,{children:["To enable RNTL to interact with RNGH’s ",(0,r.jsx)(s.code,{children:"Pressable"})," component, the library exposes ",(0,r.jsx)(s.code,{children:"testOnly_onPress*"})," props on the ",(0,r.jsx)(s.code,{children:"NativeButton"})," host component rendered by ",(0,r.jsx)(s.code,{children:"Pressable"}),". This adjustment allows RNTL to simulate interactions during testing."]}),"\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",title:"Simplified",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:" Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ onPress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" onPressIn"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" onPressOut"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" onLongPress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},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:"  // Component logic..."})}),"\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:"  const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" isTestEnv"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" process"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"env"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"NODE_ENV"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ==="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'test'"}),(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:"  return"}),(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-constant)"},children:"GestureDetector"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" gesture"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{gesture}>"})]}),"\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-constant)"},children:"NativeButton"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"        /* Other props... */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"        testOnly_onPress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{isTestEnv "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" onPress "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" undefined"}),(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:"        testOnly_onPressIn"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{isTestEnv "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" onPressIn "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" undefined"}),(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:"        testOnly_onPressOut"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{isTestEnv "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" onPressOut "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" undefined"}),(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:"        testOnly_onLongPress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{isTestEnv "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" onLongPress "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" undefined"}),(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.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-constant)"},children:"GestureDetector"}),(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",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})})]})}function t(){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)(o,{...e})}):o(e)}t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fadvanced%2Fthird-party-integration.mdx"]={toc:[{id:"handling-events-in-third-party-libraries",text:"Handling Events in Third-Party Libraries",depth:2},{id:"example-react-native-gesture-handler",text:"Example: React Native Gesture Handler",depth:3}],title:"Third-Party Library Integration",headingTitle:"Third-Party Library Integration",frontmatter:{}}}}]);