2020-05-13 08:31:19 +00:00
<!doctype html>
2024-01-05 12:18:36 +00:00
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-react-navigation" data-has-hydrated = "false" >
2020-05-13 08:31:19 +00:00
< head >
< meta charset = "UTF-8" >
2024-01-05 12:18:36 +00:00
< meta name = "generator" content = "Docusaurus v3.0.0" >
< title data-rh = "true" > React Navigation | React Native Testing Library< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:image" content = "https://callstack.github.io/react-native-testing-library/img/owl.png" > < meta data-rh = "true" name = "twitter:image" content = "https://callstack.github.io/react-native-testing-library/img/owl.png" > < meta data-rh = "true" property = "og:url" content = "https://callstack.github.io/react-native-testing-library/docs/react-navigation" > < meta data-rh = "true" property = "og:locale" content = "en" > < meta data-rh = "true" name = "docusaurus_locale" content = "en" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "React Navigation | React Native Testing Library" > < meta data-rh = "true" name = "description" content = "This examples has not been updated for a long time and not showcase current recommended testing practices. We plan to update this document soon." > < meta data-rh = "true" property = "og:description" content = "This examples has not been updated for a long time and not showcase current recommended testing practices. We plan to update this document soon." > < link data-rh = "true" rel = "icon" href = "/react-native-testing-library/img/owl.png" > < link data-rh = "true" rel = "canonical" href = "https://callstack.github.io/react-native-testing-library/docs/react-navigation" > < link data-rh = "true" rel = "alternate" href = "https://callstack.github.io/react-native-testing-library/docs/react-navigation" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://callstack.github.io/react-native-testing-library/docs/react-navigation" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://6CJ0BV6AVN-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "search" type = "application/opensearchdescription+xml" title = "React Native Testing Library" href = "/react-native-testing-library/opensearch.xml" > < link rel = "stylesheet" href = "/react-native-testing-library/assets/css/styles.afd276ca.css" >
2024-03-12 10:37:37 +00:00
< script src = "/react-native-testing-library/assets/js/runtime~main.33c6f488.js" defer = "defer" > < / script >
2024-01-26 15:43:23 +00:00
< script src = "/react-native-testing-library/assets/js/main.3e94263e.js" defer = "defer" > < / script >
2020-05-13 08:31:19 +00:00
< / head >
2022-08-09 16:04:54 +00:00
< body class = "navigation-with-keyboard" >
2024-01-26 15:43:23 +00:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; t ( null !== e ? e : "light" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < div role = "region" aria-label = "Skip to main content" > < a class = "skipToContent_fXgn" href = "#__docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "navbar__items" > < button aria-label = "Toggle navigation bar" aria-expanded = "false" class = "navbar__toggle clean-btn" type = "button" > < svg width = "30" height = "30" viewBox = "0 0 30 30" aria-hidden = "true" > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" > < / path > < / svg > < / button > < a class = "navbar__brand" href = "/react-native-testing-library/" > < div class = "navbar__logo" > < img src = "/react-native-testing-library/img/owl.png" alt = "React Native Testing Library" class = "themedComponent_mlkZ themedComponent--light_NVdE" > < img src = "/react-native-testing-library/img/owl.png" alt = "React Native Testing Library" class = "themedComponent_mlkZ themedComponent--dark_xIcU" > < / div > < b class = "navbar__title text--truncate" > React Native Testing Library< / b > < / a > < / div > < div class = "navbar__items navbar__items--right" > < a class = "navbar__item navbar__link" href = "/react-native-testing-library/docs/getting-started" > Docs< / a > < a href = "https://github.com/callstack/react-native-testing-library" target = "_blank" rel = "noopener noreferrer" class = "navbar__item navbar__link" > GitHub< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < div class = "toggle_vylO colorModeToggle_DEke" > < button class = "clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type = "button" disabled = "" title = "Switch between dark and light mode (currently light mode)" aria-label = "Switch between dark and light mode (currently light mode)" aria-live = "polite" > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "lightToggleIcon_pyhR" > < path fill = "currentColor" d = "M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" > < / path > < / svg > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "darkToggleIcon_wfgR" > < path fill = "currentColor" d = "M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" > < / path > < / svg > < / button > < / div > < div class = "navbarSearchContain
2024-01-05 12:18:36 +00:00
<p>This section deals with integrating <code>@testing-library/react-native</code> with <code>react-navigation</code>, using Jest.</p>
<h2 class=" anchor anchorWithStickyNavbar_LWe7 " id = "stack-navigator" > Stack Navigator< a href = "#stack-navigator" class = "hash-link" aria-label = "Direct link to Stack Navigator" title = "Direct link to Stack Navigator" > < / a > < / h2 >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "setting-up" > Setting up< a href = "#setting-up" class = "hash-link" aria-label = "Direct link to Setting up" title = "Direct link to Setting up" > < / a > < / h3 >
< p > Install the packages required for React Navigation. For this example, we will use a < a href = "https://reactnavigation.org/docs/stack-navigator/" target = "_blank" rel = "noopener noreferrer" > stack navigator< / a > to transition to the second page when any of the items are clicked on.< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > $ yarn add @react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > community< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > masked< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > view @react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > navigation< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > native @react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > navigation< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > stack react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > gesture< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > handler react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > reanimated react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > safe< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > area< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > context react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > screens< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Create an < a href = "https://github.com/callstack/react-native-testing-library/blob/main/examples/reactnavigation/src/AppNavigator.js" target = "_blank" rel = "noopener noreferrer" > < code > ./AppNavigator.js< / code > < / a > component which will list the navigation stack:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react-native-gesture-handler' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports operator" style = "color:#393A34" > *< / span > < span class = "token imports" > < / span > < span class = "token imports keyword module" style = "color:#00009f" > as< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > React< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > createStackNavigator < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' @react-navigation/stack' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports maybe-class-name" > HomeScreen< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' ./screens/HomeScreen' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports maybe-class-name" > DetailsScreen< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' ./screens/DetailsScreen' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > Screen< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > Navigator< / span > < span class = "token plain" > < / span > < span class = "token punctuation
<p>Create your two screens which we will transition to and from them. The homescreen, found in <a href=" https: / / github . com / callstack / react-native-testing-library / blob / main / examples / reactnavigation / src / screens / HomeScreen . js " target = "_blank" rel = "noopener noreferrer" > < code > ./screens/HomeScreen.js< / code > < / a > , contains a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports operator" style = "color:#393A34" > *< / span > < span class = "token imports" > < / span > < span class = "token imports keyword module" style = "color:#00009f" > as< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > React< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > Text< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > View< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > FlatList< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > TouchableOpacity< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > StyleSheet< / span > < span class = "token imports" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react-native' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > default< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:#d73a49" > HomeScreen< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token parameter punctuation" style = "color:#393A34" > {< / span > < span class = "token parameter" > navigation < / span > < span class = "token parameter punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > [< / span > < span class = "token plain" > items< / span > < span class = "token punctuation" style = "color:#393A34" > ]< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > React< / span > < span class = "token punc
<p>The details screen, found in <a href=" https: / / github . com / callstack / react-native-testing-library / blob / main / examples / reactnavigation / src / screens / DetailsScreen . js " target = "_blank" rel = "noopener noreferrer" > < code > ./screens/DetailsScreen.js< / code > < / a > , contains a header with the item number passed from the home screen:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token comment" style = "color:#999988;font-style:italic" > // ./screens/DetailsScreen.js< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports operator" style = "color:#393A34" > *< / span > < span class = "token imports" > < / span > < span class = "token imports keyword module" style = "color:#00009f" > as< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > React< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > Text< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > StyleSheet< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > View< / span > < span class = "token imports" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react-native' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > default< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:#d73a49" > DetailsScreen< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token parameter" > props< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > item < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token known-class-name class-name" > Number< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token method function property-access" style = "color:#d73a49" > parseInt< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > props< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token property-access" > route< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token property-access" > par
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "setting-up-the-test-environment" > Setting up the test environment< a href = "#setting-up-the-test-environment" class = "hash-link" aria-label = "Direct link to Setting up the test environment" title = "Direct link to Setting up the test environment" > < / a > < / h3 >
< p > Install required dev dependencies:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > $ yarn add < / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token constant" style = "color:#36acaa" > D< / span > < span class = "token plain" > jest @testing< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > library< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Create your < code > jest.config.js< / code > file (or place the following properties in your < code > package.json< / code > as a " jest" property)< / p >
< div class = "language-js codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > module< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token property-access" > exports< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token literal-property property" style = "color:#36acaa" > preset< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react-native' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token literal-property property" style = "color:#36acaa" > setupFiles< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > [< / span > < span class = "token string" style = "color:#e3116c" > ' ./node_modules/react-native-gesture-handler/jestSetup.js' < / span > < span class = "token punctuation" style = "color:#393A34" > ]< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token literal-property property" style = "color:#36acaa" > transformIgnorePatterns< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // For pnpm you need to use inlcude `(?!(?:.pnpm/)?` part like this:< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // ' node_modules/(?!(?:.pnpm/)?((jest-)?@?react-native|@react-native-community|@react-navigation))' ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > ]< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < /pat
< p > Notice the 2 entries that don' t come with the default React Native project:< / p >
< ul >
< li > < code > setupFiles< / code > – < code > react-native-gesture-handler/jestSetup.js< / code > which sets up necessary mocks for < code > react-native-gesture-handler< / code > native module< / li >
< li > < code > transformIgnorePatterns< / code > – < code > node_modules/< / code > that starts with < code > react-native< / code > , < code > @react-native-community< / code > or < code > @react-navigation< / code > (added by us, the rest is in < code > react-native< / code > preset by default, so you don' t have to worry about it).< / li >
< / ul >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "example-tests" > Example tests< a href = "#example-tests" class = "hash-link" aria-label = "Direct link to Example tests" title = "Direct link to Example tests" > < / a > < / h3 >
< p > For this example, we are going to test out two things. The first thing is that the page is laid out as expected. The second, and most important, is that the page will transition to the detail screen when any item is tapped on.< / p >
< p > Let' s add a < a href = "https://github.com/callstack/react-native-testing-library/blob/main/examples/reactnavigation/src/__tests__/AppNavigator.js" target = "_blank" rel = "noopener noreferrer" > < code > AppNavigator.test.js< / code > < / a > file in < code > src/__tests__< / code > directory:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports operator" style = "color:#393A34" > *< / span > < span class = "token imports" > < / span > < span class = "token imports keyword module" style = "color:#00009f" > as< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > React< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > NavigationContainer< / span > < span class = "token imports" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' @react-navigation/native' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > render< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > screen< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > fireEvent < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' @testing-library/react-native' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports maybe-class-name" > AppNavigator< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' ../AppNavigator' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // Silence the warning https://github.com/facebook/react-native/issues/11094#issuecomment-263240420< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // Use with React Native < = 0.63< /spa
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "drawer-navigator" > Drawer Navigator< a href = "#drawer-navigator" class = "hash-link" aria-label = "Direct link to Drawer Navigator" title = "Direct link to Drawer Navigator" > < / a > < / h2 >
< p > Testing the Drawer Navigation requires an additional setup step for mocking the Reanimated library.< / p >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "setting-up-1" > Setting up< a href = "#setting-up-1" class = "hash-link" aria-label = "Direct link to Setting up" title = "Direct link to Setting up" > < / a > < / h3 >
< p > Install the packages required for React Navigation. For this example, we will use a < a href = "https://reactnavigation.org/docs/drawer-navigator/" target = "_blank" rel = "noopener noreferrer" > drawer navigator< / a > to transition between a home screen and an additional screen.< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > $ yarn add @react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > community< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > masked< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > view @react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > navigation< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > native @react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > navigation< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > drawer react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > gesture< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > handler react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > reanimated react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > safe< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > area< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > context react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > screens< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Create a < a href = "https://github.com/callstack/react-native-testing-library/blob/main/examples/reactnavigation/src/DrawerAppNavigator.js" target = "_blank" rel = "noopener noreferrer" > < code > ./DrawerAppNavigator.js< / code > < / a > component which will list the navigation stack:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react-native-gesture-handler' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports maybe-class-name" > React< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > createDrawerNavigator < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' @react-navigation/drawer' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > Screen< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > Navigator< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > createDrawerNavigator< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > default< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:#d73a49" > Navigation< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:#00009f" > return< / span > < span
< p > Create your two screens which we will transition to and from:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token function maybe-class-name" style = "color:#d73a49" > HomeScreen< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token parameter punctuation" style = "color:#393A34" > {< / span > < span class = "token parameter" > navigation < / span > < span class = "token parameter punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:#00009f" > return< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token tag punctuation" style = "color:#393A34" > < < / span > < span class = "token tag class-name" style = "color:#00009f" > View< / span > < span class = "token tag" style = "color:#00009f" > < / span > < span class = "token tag attr-name" style = "color:#00a4db" > style< / span > < span class = "token tag script language-javascript script-punctuation punctuation" style = "color:#393A34" > =< / span > < span class = "token tag script language-javascript punctuation" style = "color:#393A34" > {< / span > < span class = "token tag script language-javascript punctuation" style = "color:#393A34" > {< / span > < span class = "token tag script language-javascript" style = "color:#00009f" > < / span > < span class = "token tag script language-javascript literal-property property" style = "color:#36acaa" > flex< / span > < span class = "token tag script language-javascript operator" style = "color:#393A34" > :< / span > < span class = "token tag script language-javascript" style = "color:#00009f" > < / span > < span class = "token tag script language-javascript number" style = "color:#36acaa" > 1< / span > < span class = "token tag script language-javascript punctuation" style = "color:#393A34" > ,< / span > < span class = "token tag script language-javascript" style = "color:#00009f" > < / span > < span class = "token tag script language-javascript literal-property property" style = "color:#36acaa" > alignItems< / span > < span class = "token tag script language-javascript operator" style = "color:#393A34" > :< / span > < span class = "token tag script language-javascript" style = "color:#00009f" > < / span > < span class = "token tag script language-javascript string" style = "color:#e3116c" > ' center' < / span > < span class = "token tag script language-javascript punctuation" style = "color:#393A34" > ,< / span > < span class = "token tag script language-javascript" style = "color:#00009f" > < / span > < span class = "token tag script language-javascript literal-property property" style = "color:#36acaa" > justifyContent< / span > < span class = "token tag script language-javascript operator" style = "color:#393A34" > :< / span > < span class = "token tag script language-javascript" style = "color:#00009f" > < / span > < span class = "token tag script language-javascript string" style = "color:#e3116c" > ' center' < / span > < span class = "token tag script language-javascript" style = "color:#00009f" > < / span > < span class = "token tag script language-javascript punctuation" style = "color:#393A34" > }< / span > < span class = "token tag script language-javascript punctuation" style = "color:#393A34" > }< / span > < span class = "token tag punctuation" style = "color:#393A34" > > < / span > < span class = "token plain-text" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain-text" > < / span > < span class = "token tag punctuation" style = "color:#393A34" > < < / span > < span class
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "setting-up-the-test-environment-1" > Setting up the test environment< a href = "#setting-up-the-test-environment-1" class = "hash-link" aria-label = "Direct link to Setting up the test environment" title = "Direct link to Setting up the test environment" > < / a > < / h3 >
< p > Install required dev dependencies:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > $ yarn add < / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token constant" style = "color:#36acaa" > D< / span > < span class = "token plain" > jest @testing< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > library< / span > < span class = "token operator" style = "color:#393A34" > /< / span > < span class = "token plain" > react< / span > < span class = "token operator" style = "color:#393A34" > -< / span > < span class = "token plain" > native< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Create a < a href = "https://github.com/callstack/react-native-testing-library/blob/main/examples/reactnavigation/jest-setup.js" target = "_blank" rel = "noopener noreferrer" > < code > mock file< / code > < / a > necessary for your tests:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react-native-gesture-handler/jestSetup' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > jest< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token method function property-access" style = "color:#d73a49" > mock< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' react-native-reanimated' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" style = "color:#393A34" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > Reanimated< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > require< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' react-native-reanimated/mock' < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // The mock for `call` immediately calls the callback which is incorrect< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // So we override it with a no-op< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > Reanimated< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token keyword module" style = "color:#00009f" > default< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token method-variable function-variable method function property-access" style = "color:#d73a49" > call< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" style = "color:#393A34" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > <
< p > Create your < code > jest.config.js< / code > file (or place the following properties in your < code > package.json< / code > as a " jest" property)< / p >
< div class = "language-js codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > module< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token property-access" > exports< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token literal-property property" style = "color:#36acaa" > preset< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react-native' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token literal-property property" style = "color:#36acaa" > setupFilesAfterEnv< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > [< / span > < span class = "token string" style = "color:#e3116c" > ' ./jest-setup.js' < / span > < span class = "token punctuation" style = "color:#393A34" > ]< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token literal-property property" style = "color:#36acaa" > transformIgnorePatterns< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > ]< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Make sure that the path to the file in < code > setupFiles< / code > is correct. Jest will run these files before running your tests, so it' s the best place to put your global mocks.< / p >
< p > This setup is copied from the < a href = "https://reactnavigation.org/docs/testing/" target = "_blank" rel = "noopener noreferrer" > React Navigation documentation< / a > .< / p >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "example-tests-1" > Example tests< a href = "#example-tests-1" class = "hash-link" aria-label = "Direct link to Example tests" title = "Direct link to Example tests" > < / a > < / h3 >
< p > For this example, we are going to test out two things. The first thing is that the screen is loaded correctly. The second, and most important, is that the page will transition to the notifications screen when the button is tapped on.< / p >
< p > Let' s add a < a href = "https://github.com/callstack/react-native-testing-library/blob/main/examples/reactnavigation/src/__tests__/DrawerAppNavigator.js" target = "_blank" rel = "noopener noreferrer" > < code > DrawerAppNavigator.test.js< / code > < / a > file in < code > src/__tests__< / code > directory:< / p >
< div class = "language-jsx codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-jsx codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports maybe-class-name" > React< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' react' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > NavigationContainer< / span > < span class = "token imports" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' @react-navigation/native' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:#393A34" > {< / span > < span class = "token imports" > render< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > screen< / span > < span class = "token imports punctuation" style = "color:#393A34" > ,< / span > < span class = "token imports" > fireEvent < / span > < span class = "token imports punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' @testing-library/react-native' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token imports maybe-class-name" > DrawerAppNavigator< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' ../DrawerAppNavigator' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > describe< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' Testing react navigation' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" style = "color:#393A34" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation
<h2 class=" anchor anchorWithStickyNavbar_LWe7 " id = "running-tests" > Running tests< a href = "#running-tests" class = "hash-link" aria-label = "Direct link to Running tests" title = "Direct link to Running tests" > < / a > < / h2 >
< p > To run the tests, place a test script inside your < code > package.json< / code > < / p >
< div class = "language-json codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-json codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > {< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > " scripts" : {< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > " test" : " jest" < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > }< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > }< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
2024-01-26 15:43:23 +00:00
< p > And run the < code > test< / code > script with < code > npm test< / code > or < code > yarn test< / code > .< / p > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "theme-doc-footer-edit-meta-row row" > < div class = "col" > < a href = "https://github.com/callstack/react-native-testing-library/blob/main/website/docs/ReactNavigation.md" target = "_blank" rel = "noopener noreferrer" class = "theme-edit-this-page" > < svg fill = "currentColor" height = "20" width = "20" viewBox = "0 0 40 40" class = "iconEdit_Z9Sw" aria-hidden = "true" > < g > < path d = "m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" > < / path > < / g > < / svg > Edit this page< / a > < / div > < div class = "col lastUpdated_vwxv" > < / div > < / div > < / footer > < / article > < nav class = "pagination-nav docusaurus-mt-lg" aria-label = "Docs pages" > < / nav > < / div > < / div > < div class = "col col--3" > < div class = "tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop" > < ul class = "table-of-contents table-of-contents__left-border" > < li > < a href = "#stack-navigator" class = "table-of-contents__link toc-highlight" > Stack Navigator< / a > < ul > < li > < a href = "#setting-up" class = "table-of-contents__link toc-highlight" > Setting up< / a > < / li > < li > < a href = "#setting-up-the-test-environment" class = "table-of-contents__link toc-highlight" > Setting up the test environment< / a > < / li > < li > < a href = "#example-tests" class = "table-of-contents__link toc-highlight" > Example tests< / a > < / li > < / ul > < / li > < li > < a href = "#drawer-navigator" class = "table-of-contents__link toc-highlight" > Drawer Navigator< / a > < ul > < li > < a href = "#setting-up-1" class = "table-of-contents__link toc-highlight" > Setting up< / a > < / li > < li > < a href = "#setting-up-the-test-environment-1" class = "table-of-contents__link toc-highlight" > Setting up the test environment< / a > < / li > < li > < a href = "#example-tests-1" class = "table-of-contents__link toc-highlight" > Example tests< / a > < / li > < / ul > < / li > < li > < a href = "#running-tests" class = "table-of-contents__link toc-highlight" > Running tests< / a > < / li > < / ul > < / div > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer footer--dark" > < div class = "container container-fluid" > < div class = "row footer__links" > < div class = "col footer__col" > < div class = "footer__title" > Docs< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a class = "footer__link-item" href = "/react-native-testing-library/docs/getting-started" > Getting started< / a > < / li > < li class = "footer__item" > < a class = "footer__link-item" href = "/react-native-testing-library/docs/api" > API< / a > < / li > < / ul > < / div > < div class = "col footer__col" > < div class = "footer__title" > Community< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a href = "http://stackoverflow.com/questions/tagged/react-native-testing-library" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Stack Overflow< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li class = "footer__item" > < a href = "https://discord.gg/QbGezWe" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Discord Channel< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < / ul > < / div > < div class = "col footer__col" > < div class = "footer__title" > More< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a href = "https://github.com/callstack/react-native-testing-library" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > GitHub< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li class = "footer__item" > < a href = "https://github.com/callstack/react-native-testi
2020-05-13 08:31:19 +00:00
< / body >
< / html >
