Files
callstack__react-native-tes…/docs/migration-v2/index.html
T
2020-12-01 08:15:24 +00:00

35 lines
35 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.61">
<link rel="search" type="application/opensearchdescription+xml" title="React Native Testing Library" href="/react-native-testing-library/opensearch.xml"><title data-react-helmet="true">Migration to 2.0 | React Native Testing Library</title><meta data-react-helmet="true" property="og:image" content="https://callstack.github.io/react-native-testing-library/img/owl.png"><meta data-react-helmet="true" property="twitter:image" content="https://callstack.github.io/react-native-testing-library/img/owl.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native Testing Library"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Migration to 2.0 | React Native Testing Library"><meta data-react-helmet="true" name="description" content="This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.0."><meta data-react-helmet="true" property="og:description" content="This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.0."><meta data-react-helmet="true" property="og:url" content="https://callstack.github.io/react-native-testing-library/docs/migration-v2"><link data-react-helmet="true" rel="shortcut icon" href="/react-native-testing-library/img/owl.png"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://callstack.github.io/react-native-testing-library/docs/migration-v2"><link rel="stylesheet" href="/react-native-testing-library/styles.1a0c21df.css">
<link rel="preload" href="/react-native-testing-library/styles.8dfb75de.js" as="script">
<link rel="preload" href="/react-native-testing-library/runtime~main.c9b9aeb0.js" as="script">
<link rel="preload" href="/react-native-testing-library/main.ce42f001.js" as="script">
<link rel="preload" href="/react-native-testing-library/1.90d21bfe.js" as="script">
<link rel="preload" href="/react-native-testing-library/2.f40237fe.js" as="script">
<link rel="preload" href="/react-native-testing-library/17.0fef2f73.js" as="script">
<link rel="preload" href="/react-native-testing-library/20.0fd9dd36.js" as="script">
<link rel="preload" href="/react-native-testing-library/e91cf13d.d5eb4730.js" as="script">
<link rel="preload" href="/react-native-testing-library/17896441.6f454b4c.js" as="script">
<link rel="preload" href="/react-native-testing-library/698581a0.53c9568c.js" as="script">
</head>
<body>
<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">
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/react-native-testing-library/"><img class="navbar__logo" src="/react-native-testing-library/img/owl.png" alt="React Native Testing Library"><strong class="navbar__title">React Native Testing Library</strong></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</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><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 class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/react-native-testing-library/"><img class="navbar__logo" src="/react-native-testing-library/img/owl.png" alt="React Native Testing Library"><strong class="navbar__title">React Native Testing Library</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/react-native-testing-library/docs/getting-started">Docs</a></li><li class="menu__list-item"><a href="https://github.com/callstack/react-native-testing-library" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menuLinkText_2zSB">Introduction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/getting-started">Getting Started</a></li></ul></li><li class="menu__list-item"><a class="menu__link menuLinkText_2zSB">API Reference</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/api">API</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/api-queries">Queries</a></li></ul></li><li class="menu__list-item"><a class="menu__link menuLinkText_2zSB">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/migration-v7">Migration to 7.0</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/react-native-testing-library/docs/migration-v2">Migration to 2.0</a></li><li class="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></ul></li><li class="menu__list-item"><a class="menu__link menuLinkText_2zSB">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/react-navigation">React Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/react-native-testing-library/docs/redux-integration">Redux Integration</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Migration to 2.0</h1></header><div class="markdown"><p>This guide describes steps necessary to migrate from React Native Testing Library <code>v1.x</code> to <code>v2.0</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dropping-node-8"></a>Dropping Node 8<a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropping-node-8" title="Direct link to heading">#</a></h2><p>Node 8 reached its EOL more than 5 months ago, so it&#x27;s about time to target the library to Node 10. If you used lower version, you&#x27;ll have to upgrade to v10, but we recommend using the latest LTS version.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="auto-cleanup"></a>Auto Cleanup<a aria-hidden="true" tabindex="-1" class="hash-link" href="#auto-cleanup" title="Direct link to heading">#</a></h2><p><code>cleanup()</code> function is now called automatically after every test if your testing framework supports <code>afterEach</code> hook (like Jest, Mocha, and Jasmine).</p><p>You should be able to remove all <code>afterEach(cleanup)</code> calls in your code.</p><p>This change might break your code, if you tests are not isolated, i.e. you call <code>render</code> outside <code>test</code> block. Generally, you should <a href="https://kentcdodds.com/blog/test-isolation-with-react" target="_blank" rel="noopener noreferrer">keep your tests isolated</a>. But if you can&#x27;t or don&#x27;t want to do this right away you can prevent this behavior using any of the following ways:</p><ul><li><p>by importing <code>&#x27;react-native-testing-library/pure&#x27;</code> instead of <code>&#x27;react-native-testing-library&#x27;</code></p></li><li><p>by importing <code>&#x27;react-native-testing-library/dont-cleanup-after-each&#x27;</code> before importing <code>&#x27;react-native-testing-library&#x27;</code>. You can do it in a global way by using Jest&#x27;s <code>setupFiles</code> like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-json codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;setupFiles&quot;</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">&quot;react-native-testing-library/dont-cleanup-after-each&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain">;</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></div></div></div></div></li><li><p>by setting <code>RTNL_SKIP_AUTO_CLEANUP</code> env variable to <code>true</code>. You can do this with <code>cross-evn</code> like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token plain">cross-env RNTL_SKIP_AUTO_CLEANUP=true jest</span></div></div></div></div></div></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="waitfor-api-changes"></a>WaitFor API changes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#waitfor-api-changes" title="Direct link to heading">#</a></h2><p>We renamed <code>waitForElement</code> function to <code>waitFor</code> for consistency with React Testing Library. Additionally, the signature has slightly changed from:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> waitForElement</span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">T</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">expectation</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 operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">T</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> timeout</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> number</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> interval</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> number</span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Promise</span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">T</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span></div></div></div></div></div><p>to:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-jsx codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">default</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> waitFor</span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">T</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">expectation</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 operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token constant" style="color:#36acaa">T</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> options</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></div><div class="token-line" style="color:#393A34"><span class="token plain"> timeout</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> number</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> interval</span><span class="token operator" style="color:#393A34">?</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> number</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> Promise</span><span class="token tag punctuation" style="color:#393A34">&lt;</span><span class="token tag class-name" style="color:#00009f">T</span><span class="token tag punctuation" style="color:#393A34">&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span></div></div></div></div></div><p>Both changes should improve code readibility.</p><p><code>waitFor</code> calls (and hence also <code>findBy</code> queries) are now wrapped in <code>act</code> by default, so that you should no longer need to use <code>act</code> directly in your tests.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>You can usually avoid <code>waitFor</code> by a proper use of <code>findBy</code> asynchronous queries. It will result in more streamlined testing experience.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-global-debug-function"></a>Removed global <code>debug</code> function<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-global-debug-function" title="Direct link to heading">#</a></h2><p>The <code>debug()</code> method returned from <code>render()</code> function is all you need. We removed the global export to avoid confusion.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-global-shallow-function"></a>Removed global <code>shallow</code> function<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-global-shallow-function" title="Direct link to heading">#</a></h2><p>Shallow rendering React component is usually not a good idea, so we decided to remove the API. But, if you find it useful or need to support legacy tests, feel free to use this implementation:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-js codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword module" style="color:#00009f">import</span><span class="token plain"> </span><span class="token maybe-class-name">ShallowRenderer</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">&#x27;react-test-renderer/shallow&#x27;</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></div><div 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" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">shallow</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">instance</span><span class="token parameter operator" style="color:#393A34">:</span><span class="token parameter"> ReactTestInstance </span><span class="token parameter operator" style="color:#393A34">|</span><span class="token parameter"> React</span><span class="token parameter punctuation" style="color:#393A34">.</span><span class="token parameter">Element</span><span class="token parameter operator" style="color:#393A34">&lt;</span><span class="token parameter">any</span><span class="token parameter operator" style="color:#393A34">&gt;</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></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> renderer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">ShallowRenderer</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></div><div class="token-line" style="color:#393A34"><span class="token plain"> renderer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">render</span><span class="token punctuation" style="color:#393A34">(</span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">createElement</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">instance</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">type</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> instance</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">props</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></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> output</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> renderer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getRenderOutput</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 punctuation" style="color:#393A34">;</span><span class="token plain"></span></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-functions"></a>Removed functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-functions" title="Direct link to heading">#</a></h2><p>Following query functions have been removed after being deprecated for more than a year now:</p><ul><li><code>getByName</code></li><li><code>getAllByName</code></li><li><code>queryByName</code></li><li><code>queryAllByName</code></li></ul><p>The <code>*ByType</code> and <code>*ByProps</code> queries has been prefixed with <code>UNSAFE_</code>. These <code>UNSAFE_</code> functions are not planned for removal in future versions but their usage is discouraged. You can rename them using global search/replace in your project:</p><ul><li><code>getByType</code> -&gt; <code>UNSAFE_getByType</code></li><li><code>getAllByType</code> -&gt; <code>UNSAFE_getAllByType</code></li><li><code>queryByType</code> -&gt; <code>UNSAFE_queryByType</code></li><li><code>queryAllByType</code> -&gt; <code>UNSAFE_queryAllByType</code></li><li><code>getByProps</code> -&gt; <code>UNSAFE_getByProps</code></li><li><code>getAllByProps</code> -&gt; <code>UNSAFE_getAllByProps</code></li><li><code>queryByProps</code> -&gt; <code>UNSAFE_queryByProps</code></li><li><code>queryAllByProps</code> -&gt; <code>UNSAFE_queryAllByProps</code></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="some-bytestid-queries-behavior-changes"></a>Some <code>ByTestId</code> queries behavior changes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#some-bytestid-queries-behavior-changes" title="Direct link to heading">#</a></h2><p>In version <code>1.x</code> the <code>getByTestId</code> and <code>queryByTestId</code> queries could return non-native instances. This was a serious bug. Other query functions like <code>getAllByTestId</code>, <code>queryAllByTestId</code>, <code>findByTestId</code> and <code>findAllByTestId</code> didn&#x27;t have this issue. These correctly returned only native components instances (e.g. <code>View</code>, <code>Text</code>, etc) that got the <code>testID</code>.</p><p>In v2 we fixed this inconsistency, which may result in failing tests, if you relied on this behavior. There are few ways to handle these failures:</p><ul><li>pass the <code>testID</code> prop down so it can reach a native component, like <code>View</code> or <code>Text</code></li><li>replace <code>testID</code> with proper <code>accessibilityHint</code> or <code>accessibilityLabel</code> if it benefits the user</li><li>use safe queries like <code>*ByText</code> or <code>*ByA11yHint</code></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="deprecated-flushmicrotasksqueue"></a>Deprecated <code>flushMicrotasksQueue</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#deprecated-flushmicrotasksqueue" title="Direct link to heading">#</a></h2><p>We have deprecated <code>flushMicrotasksQueue</code> and plan to remove it in the next major. We have better alternatives available for helping you write async tests – <code>findBy</code> async queries and <code>waitFor</code> helper.</p><p>If you can&#x27;t or don&#x27;t want to migrate your tests, don&#x27;t worry. You can use the same implementation we have today:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-js codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#393A34;background-color:#f6f8fa"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">function</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">flushMicrotasksQueue</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></div><div class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">Promise</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">resolve</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">setImmediate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">resolve</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></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/callstack/react-native-testing-library/blob/master/docs/MigrationV2.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><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></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/react-native-testing-library/docs/migration-v7"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Migration to 7.0</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/react-native-testing-library/docs/how-should-i-query"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">How Should I Query? »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3klQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#dropping-node-8" class="table-of-contents__link">Dropping Node 8</a></li><li><a href="#auto-cleanup" class="table-of-contents__link">Auto Cleanup</a></li><li><a href="#waitfor-api-changes" class="table-of-contents__link">WaitFor API changes</a></li><li><a href="#removed-global-debug-function" class="table-of-contents__link">Removed global <code>debug</code> function</a></li><li><a href="#removed-global-shallow-function" class="table-of-contents__link">Removed global <code>shallow</code> function</a></li><li><a href="#removed-functions" class="table-of-contents__link">Removed functions</a></li><li><a href="#some-bytestid-queries-behavior-changes" class="table-of-contents__link">Some <code>ByTestId</code> queries behavior changes</a></li><li><a href="#deprecated-flushmicrotasksqueue" class="table-of-contents__link">Deprecated <code>flushMicrotasksQueue</code></a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><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"><h4 class="footer__title">Community</h4><ul class="footer__items"><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</a></li><li class="footer__item"><a href="https://discord.gg/QbGezWe" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord Channel</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/callstack/react-native-testing-library" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</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</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 Callstack Open Source</div></div></div></footer></div>
<script src="/react-native-testing-library/styles.8dfb75de.js"></script>
<script src="/react-native-testing-library/runtime~main.c9b9aeb0.js"></script>
<script src="/react-native-testing-library/main.ce42f001.js"></script>
<script src="/react-native-testing-library/1.90d21bfe.js"></script>
<script src="/react-native-testing-library/2.f40237fe.js"></script>
<script src="/react-native-testing-library/17.0fef2f73.js"></script>
<script src="/react-native-testing-library/20.0fd9dd36.js"></script>
<script src="/react-native-testing-library/e91cf13d.d5eb4730.js"></script>
<script src="/react-native-testing-library/17896441.6f454b4c.js"></script>
<script src="/react-native-testing-library/698581a0.53c9568c.js"></script>
</body>
</html>