callstack__react-native-testing-library/static/js/async/4756.d33da462c1.js

"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4756"],{3055(e,s,t){t.r(s),t.d(s,{default:()=>n});var r=t(4848),i=t(8453);function a(e){let s={a:"a",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)(s.h1,{id:"migration-to-built-in-jest-matchers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-built-in-jest-matchers",children:"#"}),"Migration to built-in Jest matchers"]}),"\n",(0,r.jsxs)(s.p,{children:["This guide describes the steps necessary to migrate from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/jest-native",rel:"noopener noreferrer",target:"_blank",children:"legacy Jest Native matchers v5"})," to ",(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html",children:"built-in Jest matchers"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"general-notes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#general-notes",children:"#"}),"General notes"]}),"\n",(0,r.jsxs)(s.p,{children:["All of the built-in Jest matchers provided by the React Native Testing Library support only host elements. This should not be an issue, as all RNTL v12 queries already return only host elements. When this guide states that a given matcher should work the same it assumes behavior only host elements. If you need to assert the status of composite elements use Jest Native matchers in ",(0,r.jsx)(s.a,{href:"#gradual-migration",children:"legacy mode"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"usage",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#usage",children:"#"}),"Usage"]}),"\n",(0,r.jsxs)(s.p,{children:["There is no need to set up the built-in matchers; they are automatically available in your tests when you import anything from ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"}),", e.g., ",(0,r.jsx)(s.code,{children:"render"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"gradual-migration",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#gradual-migration",children:"#"}),"Gradual migration"]}),"\n",(0,r.jsxs)(s.p,{children:["You can use the built-in matchers alongside legacy Jest Native matchers by changing their import in your ",(0,r.jsx)(s.code,{children:"jest-setup.ts"})," file:"]}),"\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.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Replace this:"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// import '@testing-library/jest-native/extend-expect';"})}),"\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:"// With this:"})}),"\n",(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-token-string-expression)"},children:" '@testing-library/jest-native/legacy-extend-expect'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In this case legacy matchers will be available using the ",(0,r.jsx)(s.code,{children:"legacy_"})," prefix, e.g.:"]}),"\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.jsx)(s.code,{children:(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:"(element)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".legacy_toHaveAccessibilityState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ busy"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.h2,{id:"migration-details",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-details",children:"#"}),"Migration details"]}),"\n",(0,r.jsxs)(s.h3,{id:"matchers-not-requiring-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#matchers-not-requiring-changes",children:"#"}),"Matchers not requiring changes"]}),"\n",(0,r.jsx)(s.p,{children:"The following matchers should work the same:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobeemptyelement",children:(0,r.jsx)(s.code,{children:"toBeEmptyElement()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsxs)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobeonthescreen",children:(0,r.jsx)(s.code,{children:"toBeOnTheScreen()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobevisible",children:(0,r.jsx)(s.code,{children:"toBeVisible()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tocontainelement",children:(0,r.jsx)(s.code,{children:"toContainElement()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tohaveaccessibilityvalue",children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tohavedisplayvalue",children:(0,r.jsx)(s.code,{children:"toHaveDisplayValue()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tohaveprop",children:(0,r.jsx)(s.code,{children:"toHaveProp()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tohavestyle",children:(0,r.jsx)(s.code,{children:"toHaveStyle()"})})}),"\n",(0,r.jsx)(s.li,{children:(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tohavetextcontent",children:(0,r.jsx)(s.code,{children:"toHaveTextContent()"})})}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"replaced-matchers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#replaced-matchers",children:"#"}),"Replaced matchers"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"toHaveAccessibilityState()"})," matcher has been replaced by the following matchers:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["enabled state: ",(0,r.jsxs)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})]}),"\n",(0,r.jsxs)(s.li,{children:["checked state: ",(0,r.jsxs)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobechecked",children:[(0,r.jsx)(s.code,{children:"toBeChecked()"})," / ",(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})]})]}),"\n",(0,r.jsxs)(s.li,{children:["selected state: ",(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobeselected",children:(0,r.jsx)(s.code,{children:"toBeSelected()"})})]}),"\n",(0,r.jsxs)(s.li,{children:["expanded state: ",(0,r.jsxs)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobeexpanded",children:[(0,r.jsx)(s.code,{children:"toBeExpanded()"})," / ",(0,r.jsx)(s.code,{children:"toBeCollapsed()"})]})]}),"\n",(0,r.jsxs)(s.li,{children:["busy state: ",(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobebusy",children:(0,r.jsx)(s.code,{children:"toBeBusy()"})})]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["The new matchers support both ",(0,r.jsx)(s.code,{children:"accessibilityState"})," and ",(0,r.jsx)(s.code,{children:"aria-*"})," props."]}),"\n",(0,r.jsxs)(s.h3,{id:"added-matchers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#added-matchers",children:"#"}),"Added matchers"]}),"\n",(0,r.jsxs)(s.p,{children:["New ",(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tohaveaccessiblename",children:(0,r.jsx)(s.code,{children:"toHaveAccessibleName()"})})," has been added."]}),"\n",(0,r.jsxs)(s.h3,{id:"noteworthy-details",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#noteworthy-details",children:"#"}),"Noteworthy details"]}),"\n",(0,r.jsx)(s.p,{children:"You should be aware of the following details:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})," matchers also check the disabled state for the element's ancestors and not only the element itself. This is the same as in legacy Jest Native matchers of the same name but differs from the removed ",(0,r.jsx)(s.code,{children:"toHaveAccessibilityState()"})," matcher."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobechecked",children:(0,r.jsx)(s.code,{children:"toBeChecked()"})})," matcher supports only elements with a ",(0,r.jsx)(s.code,{children:"checkbox"}),", ",(0,r.jsx)(s.code,{children:"radio"})," and 'switch' role"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.a,{href:"/13.x/docs/api/jest-matchers.html#tobechecked",children:(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})})," matcher supports only elements with ",(0,r.jsx)(s.code,{children:"checkbox"})," role"]}),"\n"]})]})}function n(){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)(a,{...e})}):a(e)}n.__RSPRESS_PAGE_META={},n.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fmigration%2Fjest-matchers.mdx"]={toc:[{id:"general-notes",text:"General notes",depth:2},{id:"usage",text:"Usage",depth:2},{id:"gradual-migration",text:"Gradual migration",depth:3},{id:"migration-details",text:"Migration details",depth:2},{id:"matchers-not-requiring-changes",text:"Matchers not requiring changes",depth:3},{id:"replaced-matchers",text:"Replaced matchers",depth:3},{id:"added-matchers",text:"Added matchers",depth:3},{id:"noteworthy-details",text:"Noteworthy details",depth:3}],title:"Migration to built-in Jest matchers",headingTitle:"Migration to built-in Jest matchers",frontmatter:{}}}}]);