callstack__react-native-testing-library/static/js/async/6930.90ea2504bd.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6930"],{7513(e,n,s){s.r(n),s.d(n,{default:()=>a});var r=s(4848),i=s(8453);function o(e){let n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"troubleshooting",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#troubleshooting",children:"#"}),"Troubleshooting"]}),"\n",(0,r.jsx)(n.p,{children:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"}),"\n",(0,r.jsxs)(n.h2,{id:"example-repository",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-repository",children:"#"}),"Example repository"]}),"\n",(0,r.jsxs)(n.p,{children:["We maintain an ",(0,r.jsx)(n.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/basic",rel:"noopener noreferrer",target:"_blank",children:"example repository"})," with a React Native Testing Library setup using TypeScript."]}),"\n",(0,r.jsx)(n.p,{children:"If something doesn't work in your setup, check this repository for configuration examples."}),"\n",(0,r.jsxs)(n.h2,{id:"undefined-component-error",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#undefined-component-error",children:"#"}),"Undefined component error"]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsx)(n.p,{children:"Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined."}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"This frequently happens when you mock a complex module incorrectly, e.g.:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".mock"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@react-navigation/native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    useNavigation"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  };"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.p,{children:["The above mock will mock ",(0,r.jsx)(n.code,{children:"useNavigation"})," hook as intended, but at the same time all other exports from ",(0,r.jsx)(n.code,{children:"@react-navigation/native"})," package are now ",(0,r.jsx)(n.code,{children:"undefined"}),". If you want to use ",(0,r.jsx)(n.code,{children:"NavigationContainer"})," component from the same package it will be ",(0,r.jsx)(n.code,{children:"undefined"})," and result in the error above."]}),"\n",(0,r.jsxs)(n.p,{children:["To mock only part of a package, re-export all other exports using ",(0,r.jsx)(n.code,{children:"jest.requireActual"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".mock"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@react-navigation/native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"  return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"    ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".requireActual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'@react-navigation/native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"    useNavigation"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"  };"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.p,{children:["That way the mock will re-export all of the ",(0,r.jsx)(n.code,{children:"@react-navigation/native"})," members and overwrite only the ",(0,r.jsx)(n.code,{children:"useNavigation"})," hook."]}),"\n",(0,r.jsxs)(n.p,{children:["Alternatively, you can use ",(0,r.jsx)(n.code,{children:"jest.spyOn"})," to mock package exports selectively."]}),"\n",(0,r.jsxs)(n.h3,{id:"mocking-react-native",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#mocking-react-native",children:"#"}),"Mocking React Native"]}),"\n",(0,r.jsxs)(n.p,{children:["When mocking the ",(0,r.jsx)(n.code,{children:"react-native"})," package, don't mock the whole package at once, as this has issues with ",(0,r.jsx)(n.code,{children:"jest.requireActual"}),". Mock specific library paths inside the package instead, e.g.:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"jest-setup.ts",lang:"ts",children:(0,r.jsx)(n.code,{children:(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".mock"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'react-native/Libraries/EventEmitter/NativeEventEmitter'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})})})}),"\n",(0,r.jsxs)(n.h2,{id:"act-warnings",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#act-warnings",children:"#"}),"Act warnings"]}),"\n",(0,r.jsxs)(n.p,{children:["When writing tests you may encounter warnings connected with ",(0,r.jsx)(n.code,{children:"act()"})," function. There are two kinds of these warnings:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["sync ",(0,r.jsx)(n.code,{children:"act()"})," warning - ",(0,r.jsx)(n.code,{children:"Warning: An update to Component inside a test was not wrapped in act(...)"})]}),"\n",(0,r.jsxs)(n.li,{children:["async ",(0,r.jsx)(n.code,{children:"act()"})," warning - ",(0,r.jsx)(n.code,{children:"Warning: You called act(async () => ...) without await"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["You can read more about ",(0,r.jsx)(n.code,{children:"act()"})," function in our ",(0,r.jsxs)(n.a,{href:"/docs/advanced/understanding-act.html",children:["understanding ",(0,r.jsx)(n.code,{children:"act"})," function guide"]}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["Normally, you should not encounter sync ",(0,r.jsx)(n.code,{children:"act()"})," warnings, but if that happens this probably indicate an issue with your test and should be investigated."]}),"\n",(0,r.jsxs)(n.p,{children:["In case of async ",(0,r.jsx)(n.code,{children:"act()"})," function this might happen more or less randomly, especially if your components contain async logic. So far this warning does not seem to affect test correctness."]})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fguides%2Ftroubleshooting.mdx"]={toc:[{id:"example-repository",text:"Example repository",depth:2},{id:"undefined-component-error",text:"Undefined component error",depth:2},{id:"mocking-react-native",text:"Mocking React Native",depth:3},{id:"act-warnings",text:"Act warnings",depth:2}],title:"Troubleshooting",headingTitle:"Troubleshooting",frontmatter:{}}}}]);