mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
github-actions[bot]
16 lines
38 KiB
HTML
16 lines
38 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-migration-v7">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v2.3.1">
|
||
<title data-rh="true">Migration to 7.0 | 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/migration-v7"><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="Migration to 7.0 | React Native Testing Library"><meta data-rh="true" name="description" content="We renamed the react-native-testing-library npm package to @testing-library/react-native, officially joining the "Testing Library" family 🎉."><meta data-rh="true" property="og:description" content="We renamed the react-native-testing-library npm package to @testing-library/react-native, officially joining the "Testing Library" family 🎉."><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/migration-v7"><link data-rh="true" rel="alternate" href="https://callstack.github.io/react-native-testing-library/docs/migration-v7" hreflang="en"><link data-rh="true" rel="alternate" href="https://callstack.github.io/react-native-testing-library/docs/migration-v7" 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.3d4b37b8.css">
|
||
<link rel="preload" href="/react-native-testing-library/assets/js/runtime~main.67f68cbe.js" as="script">
|
||
<link rel="preload" href="/react-native-testing-library/assets/js/main.8fb6d91a.js" as="script">
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</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="themedImage_ToTc themedImage--light_HNdA"><img src="/react-native-testing-library/img/owl.png" alt="React Native Testing Library" class="themedImage_ToTc themedImage--dark_i4oU"></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="searchBox_ZlJk"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebarViewport_Xe31"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">Introduction</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/getting-started">Getting Started</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/faq">FAQ</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">API Reference</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/api">API</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/api-queries">Queries</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/jest-matchers">Jest Matchers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/user-event">User Event</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">Guides</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/troubleshooting">Troubleshooting</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/how-should-i-query">How Should I Query?</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/eslint-plugin-testing-library">ESLint Plugin Testing Library Compatibility</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">Advanced</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/testing-env">Testing Environment</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/understanding-act">Understanding Act function</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--active">Migrations</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-jest-native">Migration from Jest Native matchers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-v12">Migration to 12.0</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-v11">Migration to 11.0</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-v9">Migration to 9.0</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/react-native-testing-library/docs/migration-v7">Migration to 7.0</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-v2">Migration to 2.0</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">Examples</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/react-navigation">React Navigation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/redux-integration">Redux Integration</a></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/react-native-testing-library/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Migrations</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Migration to 7.0</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Migration to 7.0</h1></header><div class="theme-admonition theme-admonition-caution alert alert--warning admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</div><div class="admonitionContent_S0QG"><p>We renamed the <code>react-native-testing-library</code> npm package to <code>@testing-library/react-native</code>, officially joining the "Testing Library" family 🎉.</p></div></div><p>As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:</p><div class="tableOfContentsInline_prmo"><ul class="table-of-contents"><li><a href="#guide-for-react-native-testing-library-users">Guide for <code>react-native-testing-library</code> users</a><ul><li><a href="#renaming-the-library">Renaming the library</a></li><li><a href="#new-aliases">New aliases</a></li><li><a href="#renaming-byplaceholder-queries">Renaming <code>ByPlaceholder</code> queries</a></li><li><a href="#fireevent-support-for-disabled-components"><code>fireEvent</code> support for disabled components</a></li></ul></li><li><a href="#guide-for-testing-libraryreact-native-users">Guide for <code>@testing-library/react-native</code> users</a><ul><li><a href="#renaming-wait-helpers">Renaming "wait" helpers</a></li><li><a href="#changes-to-bytestid-queries">Changes to <code>ByTestId</code> queries</a></li><li><a href="#no-bytitle-queries">No <code>ByTitle</code> queries</a></li><li><a href="#no-custom-jest-configuration">No custom Jest configuration</a></li><li><a href="#cleanup-is-included-by-default">Cleanup is included by default</a></li><li><a href="#no-nativetestinstance-abstraction">No NativeTestInstance abstraction</a></li><li><a href="#no-container-nor-baseelement-returned-from-render">No <code>container</code> nor <code>baseElement</code> returned from <code>render</code></a></li><li><a href="#firing-events-changes">Firing events changes</a></li></ul></li></ul></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="guide-for-react-native-testing-library-users">Guide for <code>react-native-testing-library</code> users<a href="#guide-for-react-native-testing-library-users" class="hash-link" aria-label="Direct link to guide-for-react-native-testing-library-users" title="Direct link to guide-for-react-native-testing-library-users"></a></h2><p>This guide describes steps necessary to migrate from React Native Testing Library <code>v2.x</code> or <code>v6.0</code> to <code>v7.0</code>.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="renaming-the-library">Renaming the library<a href="#renaming-the-library" class="hash-link" aria-label="Direct link to Renaming the library" title="Direct link to Renaming the library"></a></h3><ol><li>Install <code>@testing-library/react-native</code>.</li><li>Uninstall <code>react-native-testing-library</code>.</li><li>Rename all references of <code>react-native-testing-library</code> to <code>@testing-library/react-native</code>.</li></ol><p>You may have noticed a strange v2 to v7 upgrade, skipping versions 3, 4, 5 and 6. This is because we renamed the <code>react-native-testing-library</code> npm package to <code>@testing-library/react-native</code>, officially joining the "Testing Library" family 🎉. We're merging existing two libraries into a single one. The <a href="https://github.com/testing-library/native-testing-library" target="_blank" rel="noopener noreferrer">native-testing-library</a> repository, which had v6, will soon be archived and using <code>@testing-library/react-native</code> below v7, sourced from mentioned repository, is deprecated.</p><p>For branding purposes we keep the "React Native Testing Library" name, similar to "React Testing Library". Only the npm published package is changing. The code repository also stays the same under Callstack governance.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="new-aliases">New aliases<a href="#new-aliases" class="hash-link" aria-label="Direct link to New aliases" title="Direct link to New aliases"></a></h3><p>To improve compatibility with React Testing Library, and ease the migration for <code>@testing-library/react-native</code> users using version below v7, we've introduced new aliases to our accessibility queries:</p><ul><li><code>ByLabelText</code> aliasing <code>ByA11yLabel</code> queries</li><li><code>ByHintText</code> aliasing <code>ByA11yHint</code> queries</li><li><code>ByRole</code> aliasing <code>ByA11yRole</code> queries</li></ul><p>We like the new names and consider removing the aliases in future releases.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="renaming-byplaceholder-queries">Renaming <code>ByPlaceholder</code> queries<a href="#renaming-byplaceholder-queries" class="hash-link" aria-label="Direct link to renaming-byplaceholder-queries" title="Direct link to renaming-byplaceholder-queries"></a></h3><p>To improve compatibility with React Testing Library, and to ease the migration for <code>@testing-library/react-native</code> users using version below v7, we've renamed following queries:</p><ul><li><code>ByPlaceholder</code> -> <code>ByPlaceholderText</code></li></ul><p>Please replace all occurrences of these queries in your codebase.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="fireevent-support-for-disabled-components"><code>fireEvent</code> support for disabled components<a href="#fireevent-support-for-disabled-components" class="hash-link" aria-label="Direct link to fireevent-support-for-disabled-components" title="Direct link to fireevent-support-for-disabled-components"></a></h3><p>To improve compatibility with the real React Native environment <code>fireEvent</code> now performs checks whether the component is "disabled" before firing an event on it. It uses the Responder system to establish should the event fire, which resembles the actual React Native runtime closer than we used to.</p><p>If your code contained any workarounds for preventing events firing on disabled events, you should now be able to remove them.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="guide-for-testing-libraryreact-native-users">Guide for <code>@testing-library/react-native</code> users<a href="#guide-for-testing-libraryreact-native-users" class="hash-link" aria-label="Direct link to guide-for-testing-libraryreact-native-users" title="Direct link to guide-for-testing-libraryreact-native-users"></a></h2><p>This guide describes steps necessary to migrate from <code>@testing-library/react-native</code> from <code>v6.0</code> to <code>v7.0</code>. Although the name stays the same, this is a different library, sourced at <a href="https://github.com/callstack/react-native-testing-library" target="_blank" rel="noopener noreferrer">Callstack GitHub repository</a>. We made sure the upgrade path is as easy for you as possible.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="renaming-wait-helpers">Renaming "wait" helpers<a href="#renaming-wait-helpers" class="hash-link" aria-label="Direct link to Renaming "wait" helpers" title="Direct link to Renaming "wait" helpers"></a></h3><p>The <code>wait</code> and <code>waitForElement</code> helpers are replaced by <code>waitFor</code>. Please rename all occurrences of these in your codebase.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="changes-to-bytestid-queries">Changes to <code>ByTestId</code> queries<a href="#changes-to-bytestid-queries" class="hash-link" aria-label="Direct link to changes-to-bytestid-queries" title="Direct link to changes-to-bytestid-queries"></a></h3><p>The <code>ByTestId</code> queries don't accept RegExps. Please use strings instead. We're happy to accept PRs adding this functionality :).</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="no-bytitle-queries">No <code>ByTitle</code> queries<a href="#no-bytitle-queries" class="hash-link" aria-label="Direct link to no-bytitle-queries" title="Direct link to no-bytitle-queries"></a></h3><p>Our library doesn't implement <code>ByTitle</code> queries, which are targetting components with <code>title</code> prop, specifically <code>Button</code> and <code>RefreshControl</code>. If your tests only use <code>ByTitle</code> to target <code>Button</code> components, you can replace them with <code>ByText</code> queries, since React Native renders <code>Text</code> under the hood.</p><p>If you need to query <code>RefreshControl</code> component and can't figure out other way around it, you can use e.g. <code>UNSAFE_getByProps({title})</code> query.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="no-custom-jest-configuration">No custom Jest configuration<a href="#no-custom-jest-configuration" class="hash-link" aria-label="Direct link to No custom Jest configuration" title="Direct link to No custom Jest configuration"></a></h3><p>Use the official React Native preset for Jest:</p><div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar"><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"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> "jest": {</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> "preset": "@testing-library/react-native"</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa"> "preset": "react-native"</span><br></span><span class="token-line" style="color:#393A34"><span class="token inserted-sign inserted line" style="color:#36acaa"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><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 class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path 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 class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>We're told this also speeds up your tests startup on cold cache. Using official preset has another benefit – the library is compatible with any version of React Native without introducing breaking changes.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="cleanup-is-included-by-default">Cleanup is included by default<a href="#cleanup-is-included-by-default" class="hash-link" aria-label="Direct link to Cleanup is included by default" title="Direct link to Cleanup is included by default"></a></h3><p>Cleaning up (unmounting) components after each test is included by default in the same manner as in React Testing Library. Please remove this setup file from Jest config:</p><div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar"><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"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> "jest": {</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49"> "setupFilesAfterEnv": ["@testing-library/react-native/cleanup-after-each"]</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token unchanged line"></span><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 class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path 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 class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>You can opt-out of this behavior by running tests with <code>RNTL_SKIP_AUTO_CLEANUP=true</code> flag or importing from <code>@testing-library/react-native/pure</code>. We encourage you to keep the default though.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="no-nativetestinstance-abstraction">No <a href="https://www.native-testing-library.com/docs/api-test-instance" target="_blank" rel="noopener noreferrer">NativeTestInstance</a> abstraction<a href="#no-nativetestinstance-abstraction" class="hash-link" aria-label="Direct link to no-nativetestinstance-abstraction" title="Direct link to no-nativetestinstance-abstraction"></a></h3><p>We don't provide any abstraction over <code>ReactTestInstance</code> returned by queries, but allow to use it directly to access queried component's <code>props</code> or <code>type</code> for that example.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="no-container-nor-baseelement-returned-from-render">No <code>container</code> nor <code>baseElement</code> returned from <code>render</code><a href="#no-container-nor-baseelement-returned-from-render" class="hash-link" aria-label="Direct link to no-container-nor-baseelement-returned-from-render" title="Direct link to no-container-nor-baseelement-returned-from-render"></a></h3><p>There's no <code>container</code> returned from the <code>render</code> function. If you must, use <code>react-test-renderer</code> directly, although we advise against doing so. We also don't implement <code>baseElement</code> because of that, since there's no <code>document.documentElement</code> nor <code>container</code>.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="firing-events-changes">Firing events changes<a href="#firing-events-changes" class="hash-link" aria-label="Direct link to Firing events changes" title="Direct link to Firing events changes"></a></h3><p>There are slight differences in how <code>fireEvent</code> works in both libraries:</p><ol><li>Our library doesn't perform validation checks for events fired upon tested components.</li><li>Signature is different:<div class="language-diff codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-diff codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted prefix deleted" style="color:#d73a49">-</span><span class="token deleted-sign deleted line" style="color:#d73a49">fireEvent[eventName](node: FiberRoot, eventProperties: NativeTestEvent)</span><br></span><span class="token-line" style="color:#393A34"><span class="token deleted-sign deleted line" style="color:#d73a49"></span><span class="token inserted-sign inserted prefix inserted" style="color:#36acaa">+</span><span class="token inserted-sign inserted line" style="color:#36acaa">fireEvent(element: ReactTestInstance, eventName: string, ...data: Array<any>)</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 class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path 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 class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></li><li>There is no <code>NativeTestEvent</code> - second and rest arguments are used instead.</li><li>There are only 3 short-hand events: <a href="/react-native-testing-library/docs/api#fireeventpress-element-reacttestinstance--void"><code>fireEvent.press</code></a>, <a href="/react-native-testing-library/docs/api#fireeventchangetext-element-reacttestinstance-data-arrayany--void"><code>fireEvent.changeText</code></a> and <a href="/react-native-testing-library/docs/api#fireeventscroll-element-reacttestinstance-data-arrayany--void"><code>fireEvent.scroll</code></a>. For all other or custom events you can use the base signature.</li></ol></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/MigrationV7.md" target="_blank" rel="noreferrer noopener" 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 navigation"><a class="pagination-nav__link pagination-nav__link--prev" href="/react-native-testing-library/docs/migration-v9"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Migration to 9.0</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/react-native-testing-library/docs/migration-v2"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Migration to 2.0</div></a></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="#guide-for-react-native-testing-library-users" class="table-of-contents__link toc-highlight">Guide for <code>react-native-testing-library</code> users</a><ul><li><a href="#renaming-the-library" class="table-of-contents__link toc-highlight">Renaming the library</a></li><li><a href="#new-aliases" class="table-of-contents__link toc-highlight">New aliases</a></li><li><a href="#renaming-byplaceholder-queries" class="table-of-contents__link toc-highlight">Renaming <code>ByPlaceholder</code> queries</a></li><li><a href="#fireevent-support-for-disabled-components" class="table-of-contents__link toc-highlight"><code>fireEvent</code> support for disabled components</a></li></ul></li><li><a href="#guide-for-testing-libraryreact-native-users" class="table-of-contents__link toc-highlight">Guide for <code>@testing-library/react-native</code> users</a><ul><li><a href="#renaming-wait-helpers" class="table-of-contents__link toc-highlight">Renaming "wait" helpers</a></li><li><a href="#changes-to-bytestid-queries" class="table-of-contents__link toc-highlight">Changes to <code>ByTestId</code> queries</a></li><li><a href="#no-bytitle-queries" class="table-of-contents__link toc-highlight">No <code>ByTitle</code> queries</a></li><li><a href="#no-custom-jest-configuration" class="table-of-contents__link toc-highlight">No custom Jest configuration</a></li><li><a href="#cleanup-is-included-by-default" class="table-of-contents__link toc-highlight">Cleanup is included by default</a></li><li><a href="#no-nativetestinstance-abstraction" class="table-of-contents__link toc-highlight">No NativeTestInstance abstraction</a></li><li><a href="#no-container-nor-baseelement-returned-from-render" class="table-of-contents__link toc-highlight">No <code>container</code> nor <code>baseElement</code> returned from <code>render</code></a></li><li><a href="#firing-events-changes" class="table-of-contents__link toc-highlight">Firing events changes</a></li></ul></li></ul></div></div></div></div></main></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-testing-library" target="_blank" rel="noopener noreferrer" class="footer__link-item">Star<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><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2023 Callstack Open Source</div></div></div></footer></div>
|
||
<script src="/react-native-testing-library/assets/js/runtime~main.67f68cbe.js"></script>
|
||
<script src="/react-native-testing-library/assets/js/main.8fb6d91a.js"></script>
|
||
</body>
|
||
</html> |