mirror of
https://github.com/callstack/react-native-testing-library.git
synced 2026-09-18 23:09:04 +08:00
deploy: 9e1b63653d
This commit is contained in:
github-actions[bot]
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -48,7 +48,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'header'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Sign in to Hello World App'</span><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'header'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Sign in to Hello World App'</span><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> ).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.queryByLabelText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Username'</span><span style="color:var(--shiki-foreground)">)).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.queryByLabelText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Password'</span><span style="color:var(--shiki-foreground)">)).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
@@ -81,7 +81,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>It accepts an <code>expectation</code> to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to <code>findBy*</code> queries they accept <code>timeout</code> and <code>interval</code> options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms.</p>
|
||||
<h4 class="rp-toc-include" id="example-2"><a href="#example-2" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Example</h4>
|
||||
@@ -94,7 +94,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">> {}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>This function is, in a way, the negation of <code>waitFor</code> as it expects the initial expectation to be true (not throw an error), only to turn invalid (start throwing errors) on subsequent runs. It operates using the same <code>timeout</code> and <code>interval</code> parameters as <code>findBy*</code> queries and <code>waitFor</code>.</p>
|
||||
<h4 class="rp-toc-include" id="example-3"><a href="#example-3" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Example</h4>
|
||||
|
||||
@@ -32,7 +32,7 @@ test('User can sign in with correct credentials', async () => {
|
||||
|
||||
// Follow-up assertions do not need to be async, as we already waited for sign in operation to complete
|
||||
expect(
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' })
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' }),
|
||||
).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
|
||||
@@ -87,7 +87,7 @@ function waitFor<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -111,7 +111,7 @@ function waitForElementToBeRemoved<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T> {}
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -33,12 +33,12 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> function</span><span style="color:var(--shiki-token-function)"> renderWithProviders</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> ui</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> React</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-function)">ReactElement</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderWithProvidersProps</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderWithProvidersProps</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">) {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> return</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-token-function)"> value</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">?.user </span><span style="color:var(--shiki-token-keyword)">??</span><span style="color:var(--shiki-token-constant)"> null</span><span style="color:var(--shiki-foreground)">}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">ThemeProvider.Provider</span><span style="color:var(--shiki-token-function)"> value</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">?.theme </span><span style="color:var(--shiki-token-keyword)">??</span><span style="color:var(--shiki-token-string-expression)"> 'light'</span><span style="color:var(--shiki-foreground)">}>{ui}</</span><span style="color:var(--shiki-token-constant)">ThemeProvider.Provider</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__title">custom-render/index.test.tsx</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx" data-title="custom-render/index.test.tsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { screen } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> '@testing-library/react-native'</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
|
||||
@@ -16,12 +16,12 @@ interface RenderWithProvidersProps {
|
||||
|
||||
export function renderWithProviders<T>(
|
||||
ui: React.ReactElement<T>,
|
||||
options?: RenderWithProvidersProps
|
||||
options?: RenderWithProvidersProps,
|
||||
) {
|
||||
return render(
|
||||
<UserProvider.Provider value={options?.user ?? null}>
|
||||
<ThemeProvider.Provider value={options?.theme ?? 'light'}>{ui}</ThemeProvider.Provider>
|
||||
</UserProvider.Provider>
|
||||
</UserProvider.Provider>,
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -116,10 +116,10 @@ corresponding values as an argument.</p>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> */</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> const</span><span style="color:var(--shiki-token-constant)"> renderWithAtoms</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> component</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> React</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-function)">ReactElement</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> RenderWithAtomsOptions</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> RenderWithAtomsOptions</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> return</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-token-function)"> initialValues</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">.initialValues}>{component}</</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-token-function)"> initialValues</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">.initialValues}>{component}</</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span>
|
||||
<span class="line"></span>
|
||||
|
||||
@@ -110,10 +110,10 @@ export interface RenderWithAtomsOptions {
|
||||
*/
|
||||
export const renderWithAtoms = <T,>(
|
||||
component: React.ReactElement,
|
||||
options: RenderWithAtomsOptions
|
||||
options: RenderWithAtomsOptions,
|
||||
) => {
|
||||
return render(
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -34,7 +34,7 @@ more realistic event simulation by emitting a sequence of events with proper eve
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // MyComponent renders TextInput which has a placeholder 'Enter details'</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // and with `onChangeText` bound to handleChangeText</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">MyComponent</span><span style="color:var(--shiki-token-function)"> handleChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onEventMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">MyComponent</span><span style="color:var(--shiki-token-function)"> handleChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onEventMock} /></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> fireEvent</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByPlaceholderText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'change'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> 'onChangeText'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> 'ab'</span><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
@@ -51,7 +51,7 @@ Please note that from version <code>7.0</code> <code>fireEvent</code> performs c
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"my placeholder"</span><span style="color:var(--shiki-token-function)"> onBlur</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onBlurMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)">// you can omit the `on` prefix</span></span>
|
||||
@@ -78,7 +78,7 @@ It is recommended to use the User Event <a href="/react-native-testing-library/1
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TouchableOpacity</span><span style="color:var(--shiki-token-function)"> onPress</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onPressMock}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Press me</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">TouchableOpacity</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)">fireEvent</span><span style="color:var(--shiki-token-function)">.press</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Press me'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> eventData);</span></span>
|
||||
@@ -97,7 +97,7 @@ It is recommended to use the User Event <a href="/react-native-testing-library/1
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"Enter data"</span><span style="color:var(--shiki-token-function)"> onChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onChangeTextMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)">fireEvent</span><span style="color:var(--shiki-token-function)">.changeText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByPlaceholderText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Enter data'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-constant)"> CHANGE_TEXT</span><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
@@ -120,7 +120,7 @@ It is recommended to use the User Event <a href="/react-native-testing-library/1
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-token-function)"> onScroll</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onScrollMock}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>XD</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)">fireEvent</span><span style="color:var(--shiki-token-function)">.scroll</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'scroll-view'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> eventData);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
|
||||
@@ -23,7 +23,7 @@ test('fire changeText event', () => {
|
||||
render(
|
||||
// MyComponent renders TextInput which has a placeholder 'Enter details'
|
||||
// and with `onChangeText` bound to handleChangeText
|
||||
<MyComponent handleChangeText={onEventMock} />
|
||||
<MyComponent handleChangeText={onEventMock} />,
|
||||
);
|
||||
|
||||
fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab');
|
||||
@@ -46,7 +46,7 @@ const onBlurMock = jest.fn();
|
||||
render(
|
||||
<View>
|
||||
<TextInput placeholder="my placeholder" onBlur={onBlurMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// you can omit the `on` prefix
|
||||
@@ -84,7 +84,7 @@ render(
|
||||
<TouchableOpacity onPress={onPressMock}>
|
||||
<Text>Press me</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
fireEvent.press(screen.getByText('Press me'), eventData);
|
||||
@@ -113,7 +113,7 @@ const CHANGE_TEXT = 'content';
|
||||
render(
|
||||
<View>
|
||||
<TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
|
||||
@@ -145,7 +145,7 @@ const eventData = {
|
||||
render(
|
||||
<ScrollView onScroll={onScrollMock}>
|
||||
<Text>XD</Text>
|
||||
</ScrollView>
|
||||
</ScrollView>,
|
||||
);
|
||||
|
||||
fireEvent.scroll(screen.getByText('scroll-view'), eventData);
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -26,7 +26,7 @@
|
||||
<h2 class="rp-toc-include" id="waitfor"><a href="#waitfor" class="rp-header-anchor rp-link" aria-hidden="true">#</a><code>waitFor</code></h2>
|
||||
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-token-function)"> waitFor</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expectation</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> () </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> T</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">; interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">; interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>Waits for a period of time for the <code>expectation</code> callback to pass. <code>waitFor</code> may run the callback a number of times until timeout is reached, as specified by the <code>timeout</code> and <code>interval</code> options. The callback must throw an error when the expectation is not met. Returning any value, including a falsy one, will be treated as meeting the expectation, and the callback result will be returned to the caller of <code>waitFor</code> function.</p>
|
||||
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-function)"> waitFor</span><span style="color:var(--shiki-foreground)">(() </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(mockFunction)</span><span style="color:var(--shiki-token-function)">.toHaveBeenCalledWith</span><span style="color:var(--shiki-foreground)">());</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
@@ -86,7 +86,7 @@ If you receive warnings related to <code>act()</code> function consult our <a hr
|
||||
<h2 class="rp-toc-include" id="waitforelementtoberemoved"><a href="#waitforelementtoberemoved" class="rp-header-anchor rp-link" aria-hidden="true">#</a><code>waitForElementToBeRemoved</code></h2>
|
||||
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-token-function)"> waitForElementToBeRemoved</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expectation</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> () </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> T</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">; interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">; interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>Waits for non-deterministic periods of time until queried element is removed or times out. <code>waitForElementToBeRemoved</code> periodically calls <code>expectation</code> every <code>interval</code> milliseconds to determine whether the element has been removed or not.</p>
|
||||
<div class="rp-codeblock language-jsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="jsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { render</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> screen</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> waitForElementToBeRemoved } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> '@testing-library/react-native'</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
|
||||
@@ -9,7 +9,7 @@ The `findBy*` queries are used to find elements that are not instantly available
|
||||
```tsx
|
||||
function waitFor<T>(
|
||||
expectation: () => T,
|
||||
options?: { timeout: number; interval: number }
|
||||
options?: { timeout: number; interval: number },
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -109,7 +109,7 @@ If you receive warnings related to `act()` function consult our [Understanding A
|
||||
```ts
|
||||
function waitForElementToBeRemoved<T>(
|
||||
expectation: () => T,
|
||||
options?: { timeout: number; interval: number }
|
||||
options?: { timeout: number; interval: number },
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -3,7 +3,7 @@
|
||||
```ts
|
||||
function renderHook<Result, Props>(
|
||||
callback: (props?: Props) => Result,
|
||||
options?: RenderHookOptions<Props>
|
||||
options?: RenderHookOptions<Props>,
|
||||
): RenderHookResult<Result, Props>;
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -126,7 +126,7 @@ In order for <code>*ByRole</code> queries to match an element it needs to be con
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-token-function)"> accessibilityRole</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"button"</span><span style="color:var(--shiki-token-function)"> disabled</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> element</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'button'</span><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> element2</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'button'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Hello'</span><span style="color:var(--shiki-foreground)"> });</span></span>
|
||||
@@ -307,13 +307,15 @@ In the spirit of <a href="https://testing-library.com/docs/guiding-principles" t
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">expect</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hidden from accessibility'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> includeHiddenElements</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)">// Include hidden elements</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hidden from accessibility'</span><span style="color:var(--shiki-foreground)">))</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">expect</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hidden from accessibility'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { includeHiddenElements</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hidden from accessibility'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> includeHiddenElements</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<h2 class="rp-toc-include" id="textmatch-type"><a href="#textmatch-type" class="rp-header-anchor rp-link" aria-hidden="true">#</a>TextMatch type</h2>
|
||||
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">type</span><span style="color:var(--shiki-token-function)"> TextMatch</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> string</span><span style="color:var(--shiki-token-keyword)"> |</span><span style="color:var(--shiki-token-function)"> RegExp</span><span style="color:var(--shiki-foreground)">;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
|
||||
@@ -183,7 +183,7 @@ import { render, screen } from '@testing-library/react-native';
|
||||
render(
|
||||
<Pressable accessibilityRole="button" disabled>
|
||||
<Text>Hello</Text>
|
||||
</Pressable>
|
||||
</Pressable>,
|
||||
);
|
||||
const element = screen.getByRole('button');
|
||||
const element2 = screen.getByRole('button', { name: 'Hello' });
|
||||
@@ -398,13 +398,15 @@ render(<Text style={{ display: 'none' }}>Hidden from accessibility</Text>);
|
||||
expect(
|
||||
screen.queryByText('Hidden from accessibility', {
|
||||
includeHiddenElements: false,
|
||||
})
|
||||
}),
|
||||
).not.toBeOnTheScreen();
|
||||
|
||||
// Include hidden elements
|
||||
expect(screen.getByText('Hidden from accessibility')).toBeOnTheScreen();
|
||||
expect(
|
||||
screen.getByText('Hidden from accessibility', { includeHiddenElements: true })
|
||||
screen.getByText('Hidden from accessibility', {
|
||||
includeHiddenElements: true,
|
||||
}),
|
||||
).toBeOnTheScreen();
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -34,7 +34,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-token-function)"> findAllByText</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> text</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> TextMatch</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> TextMatchOptions</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> waitForOptions</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> WaitForOptions</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> waitForOptions</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> WaitForOptions</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass <code>WaitForOptions</code> like <code>timeout</code>, <code>interval</code>, etc inside <code>options</code> argument. From this release we require passing these as the proper third parameter.</p>
|
||||
<p>This change is easy to implement:</p>
|
||||
|
||||
@@ -24,7 +24,7 @@ function findByText(text: TextMatch, options?: TextMatchOptions, waitForOptions?
|
||||
function findAllByText(
|
||||
text: TextMatch,
|
||||
options?: TextMatchOptions,
|
||||
waitForOptions?: WaitForOptions
|
||||
waitForOptions?: WaitForOptions,
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -41,7 +41,7 @@ This is a breaking change.</p></div></div>
|
||||
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-foreground)"> { </span><span style="color:var(--shiki-token-constant)">getByText</span><span style="color:var(--shiki-foreground)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> Hello <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>world</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hello world'</span><span style="color:var(--shiki-foreground)">); </span><span style="color:var(--shiki-token-comment)">// matches</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>However this behavior was different than the web one, and wouldn't always be straightforward to reason about. For instance it could match text nodes far from each other on the screen. It also prevented us from implementing the string precision API. From v9, this type of match will not work.</p>
|
||||
|
||||
@@ -37,7 +37,7 @@ In v1.14 we've introduced a feature allowing to match text when it's spread acro
|
||||
const { getByText } = render(
|
||||
<Text>
|
||||
Hello <Text>world</Text>
|
||||
</Text>
|
||||
</Text>,
|
||||
);
|
||||
getByText('Hello world'); // matches
|
||||
```
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
+22
-20
@@ -423,7 +423,7 @@ test('User can sign in with correct credentials', async () => {
|
||||
|
||||
// Follow-up assertions do not need to be async, as we already waited for sign in operation to complete
|
||||
expect(
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' })
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' }),
|
||||
).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
|
||||
@@ -478,7 +478,7 @@ function waitFor<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -502,7 +502,7 @@ function waitForElementToBeRemoved<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T> {}
|
||||
```
|
||||
|
||||
@@ -556,12 +556,12 @@ interface RenderWithProvidersProps {
|
||||
|
||||
export function renderWithProviders<T>(
|
||||
ui: React.ReactElement<T>,
|
||||
options?: RenderWithProvidersProps
|
||||
options?: RenderWithProvidersProps,
|
||||
) {
|
||||
return render(
|
||||
<UserProvider.Provider value={options?.user ?? null}>
|
||||
<ThemeProvider.Provider value={options?.theme ?? 'light'}>{ui}</ThemeProvider.Provider>
|
||||
</UserProvider.Provider>
|
||||
</UserProvider.Provider>,
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -771,10 +771,10 @@ export interface RenderWithAtomsOptions {
|
||||
*/
|
||||
export const renderWithAtoms = <T,>(
|
||||
component: React.ReactElement,
|
||||
options: RenderWithAtomsOptions
|
||||
options: RenderWithAtomsOptions,
|
||||
) => {
|
||||
return render(
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1326,7 +1326,7 @@ test('fire changeText event', () => {
|
||||
render(
|
||||
// MyComponent renders TextInput which has a placeholder 'Enter details'
|
||||
// and with `onChangeText` bound to handleChangeText
|
||||
<MyComponent handleChangeText={onEventMock} />
|
||||
<MyComponent handleChangeText={onEventMock} />,
|
||||
);
|
||||
|
||||
fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab');
|
||||
@@ -1349,7 +1349,7 @@ const onBlurMock = jest.fn();
|
||||
render(
|
||||
<View>
|
||||
<TextInput placeholder="my placeholder" onBlur={onBlurMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// you can omit the `on` prefix
|
||||
@@ -1387,7 +1387,7 @@ render(
|
||||
<TouchableOpacity onPress={onPressMock}>
|
||||
<Text>Press me</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
fireEvent.press(screen.getByText('Press me'), eventData);
|
||||
@@ -1416,7 +1416,7 @@ const CHANGE_TEXT = 'content';
|
||||
render(
|
||||
<View>
|
||||
<TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
|
||||
@@ -1448,7 +1448,7 @@ const eventData = {
|
||||
render(
|
||||
<ScrollView onScroll={onScrollMock}>
|
||||
<Text>XD</Text>
|
||||
</ScrollView>
|
||||
</ScrollView>,
|
||||
);
|
||||
|
||||
fireEvent.scroll(screen.getByText('scroll-view'), eventData);
|
||||
@@ -2052,7 +2052,7 @@ The `findBy*` queries are used to find elements that are not instantly available
|
||||
```tsx
|
||||
function waitFor<T>(
|
||||
expectation: () => T,
|
||||
options?: { timeout: number; interval: number }
|
||||
options?: { timeout: number; interval: number },
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -2152,7 +2152,7 @@ If you receive warnings related to `act()` function consult our [Understanding A
|
||||
```ts
|
||||
function waitForElementToBeRemoved<T>(
|
||||
expectation: () => T,
|
||||
options?: { timeout: number; interval: number }
|
||||
options?: { timeout: number; interval: number },
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -2336,7 +2336,7 @@ url: /react-native-testing-library/12.x/docs/api/misc/render-hook.md
|
||||
```ts
|
||||
function renderHook<Result, Props>(
|
||||
callback: (props?: Props) => Result,
|
||||
options?: RenderHookOptions<Props>
|
||||
options?: RenderHookOptions<Props>,
|
||||
): RenderHookResult<Result, Props>;
|
||||
```
|
||||
|
||||
@@ -2649,7 +2649,7 @@ import { render, screen } from '@testing-library/react-native';
|
||||
render(
|
||||
<Pressable accessibilityRole="button" disabled>
|
||||
<Text>Hello</Text>
|
||||
</Pressable>
|
||||
</Pressable>,
|
||||
);
|
||||
const element = screen.getByRole('button');
|
||||
const element2 = screen.getByRole('button', { name: 'Hello' });
|
||||
@@ -2864,13 +2864,15 @@ render(<Text style={{ display: 'none' }}>Hidden from accessibility</Text>);
|
||||
expect(
|
||||
screen.queryByText('Hidden from accessibility', {
|
||||
includeHiddenElements: false,
|
||||
})
|
||||
}),
|
||||
).not.toBeOnTheScreen();
|
||||
|
||||
// Include hidden elements
|
||||
expect(screen.getByText('Hidden from accessibility')).toBeOnTheScreen();
|
||||
expect(
|
||||
screen.getByText('Hidden from accessibility', { includeHiddenElements: true })
|
||||
screen.getByText('Hidden from accessibility', {
|
||||
includeHiddenElements: true,
|
||||
}),
|
||||
).toBeOnTheScreen();
|
||||
```
|
||||
|
||||
@@ -3624,7 +3626,7 @@ function findByText(text: TextMatch, options?: TextMatchOptions, waitForOptions?
|
||||
function findAllByText(
|
||||
text: TextMatch,
|
||||
options?: TextMatchOptions,
|
||||
waitForOptions?: WaitForOptions
|
||||
waitForOptions?: WaitForOptions,
|
||||
);
|
||||
```
|
||||
|
||||
@@ -3950,7 +3952,7 @@ In v1.14 we've introduced a feature allowing to match text when it's spread acro
|
||||
const { getByText } = render(
|
||||
<Text>
|
||||
Hello <Text>world</Text>
|
||||
</Text>
|
||||
</Text>,
|
||||
);
|
||||
getByText('Hello world'); // matches
|
||||
```
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -49,7 +49,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'header'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Sign in to Hello World App'</span><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'header'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Sign in to Hello World App'</span><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> ).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.queryByLabelText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Username'</span><span style="color:var(--shiki-foreground)">)).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.queryByLabelText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Password'</span><span style="color:var(--shiki-foreground)">)).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
@@ -75,7 +75,7 @@
|
||||
<div class="rp-codeblock language-typescript"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="typescript"><code><span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> button</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.findByRole</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-string-expression)"> 'button'</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Start'</span><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 1000</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 50</span><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 1000</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 50</span><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>Alternatively, a default global <code>timeout</code> value can be set using the <a href="/react-native-testing-library/14.x/docs/api/misc/config#configure" class="rp-link"><code>configure</code> function</a>:</p>
|
||||
<div class="rp-codeblock language-typescript"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="typescript"><code><span class="line"><span style="color:var(--shiki-token-function)">configure</span><span style="color:var(--shiki-foreground)">({ asyncUtilTimeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> timeout });</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
@@ -86,7 +86,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>It accepts an <code>expectation</code> to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to <code>findBy*</code> queries they accept <code>timeout</code> and <code>interval</code> options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms.</p>
|
||||
<h4 class="rp-toc-include" id="example-2"><a href="#example-2" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Example</h4>
|
||||
@@ -99,7 +99,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">> {}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>This function is, in a way, the negation of <code>waitFor</code> as it expects the initial expectation to be true (not throw an error), only to turn invalid (start throwing errors) on subsequent runs. It operates using the same <code>timeout</code> and <code>interval</code> parameters as <code>findBy*</code> queries and <code>waitFor</code>.</p>
|
||||
<h4 class="rp-toc-include" id="example-3"><a href="#example-3" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Example</h4>
|
||||
|
||||
@@ -33,7 +33,7 @@ test('User can sign in with correct credentials', async () => {
|
||||
|
||||
// Follow-up assertions do not need to be async, as we already waited for sign in operation to complete
|
||||
expect(
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' })
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' }),
|
||||
).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
|
||||
@@ -72,7 +72,7 @@ Each query has a default `timeout` value of 1000 ms and a default `interval` of
|
||||
const button = await screen.findByRole(
|
||||
'button',
|
||||
{ name: 'Start' },
|
||||
{ timeout: 1000, interval: 50 }
|
||||
{ timeout: 1000, interval: 50 },
|
||||
);
|
||||
```
|
||||
|
||||
@@ -92,7 +92,7 @@ function waitFor<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -116,7 +116,7 @@ function waitForElementToBeRemoved<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T> {}
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -33,12 +33,12 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> async</span><span style="color:var(--shiki-token-keyword)"> function</span><span style="color:var(--shiki-token-function)"> renderWithProviders</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> ui</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> React</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-function)">ReactElement</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderWithProvidersProps</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderWithProvidersProps</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">) {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> return</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-token-function)"> value</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">?.user </span><span style="color:var(--shiki-token-keyword)">??</span><span style="color:var(--shiki-token-constant)"> null</span><span style="color:var(--shiki-foreground)">}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">ThemeProvider.Provider</span><span style="color:var(--shiki-token-function)"> value</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">?.theme </span><span style="color:var(--shiki-token-keyword)">??</span><span style="color:var(--shiki-token-string-expression)"> 'light'</span><span style="color:var(--shiki-foreground)">}>{ui}</</span><span style="color:var(--shiki-token-constant)">ThemeProvider.Provider</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__title">custom-render/index.test.tsx</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx" data-title="custom-render/index.test.tsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { screen } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> '@testing-library/react-native'</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
|
||||
@@ -16,12 +16,12 @@ interface RenderWithProvidersProps {
|
||||
|
||||
export async function renderWithProviders<T>(
|
||||
ui: React.ReactElement<T>,
|
||||
options?: RenderWithProvidersProps
|
||||
options?: RenderWithProvidersProps,
|
||||
) {
|
||||
return await render(
|
||||
<UserProvider.Provider value={options?.user ?? null}>
|
||||
<ThemeProvider.Provider value={options?.theme ?? 'light'}>{ui}</ThemeProvider.Provider>
|
||||
</UserProvider.Provider>
|
||||
</UserProvider.Provider>,
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -116,10 +116,10 @@ corresponding values as an argument.</p>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> */</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> async</span><span style="color:var(--shiki-token-keyword)"> function</span><span style="color:var(--shiki-token-function)"> renderWithAtoms</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> component</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> React</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-function)">ReactElement</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> RenderWithAtomsOptions</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> RenderWithAtomsOptions</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">) {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> return</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-token-function)"> initialValues</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">.initialValues}>{component}</</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-token-function)"> initialValues</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">.initialValues}>{component}</</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span>
|
||||
<span class="line"></span>
|
||||
|
||||
@@ -110,10 +110,10 @@ export interface RenderWithAtomsOptions {
|
||||
*/
|
||||
export async function renderWithAtoms<T>(
|
||||
component: React.ReactElement,
|
||||
options: RenderWithAtomsOptions
|
||||
options: RenderWithAtomsOptions,
|
||||
) {
|
||||
return await render(
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -36,7 +36,7 @@ For common events like <code>press</code> or <code>type</code>, use the <a href=
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // MyComponent renders TextInput which has a placeholder 'Enter details'</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // and with `onChangeText` bound to handleChangeText</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">MyComponent</span><span style="color:var(--shiki-token-function)"> handleChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onEventMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">MyComponent</span><span style="color:var(--shiki-token-function)"> handleChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onEventMock} /></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> fireEvent</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByPlaceholderText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'change'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> 'onChangeText'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> 'ab'</span><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
@@ -53,7 +53,7 @@ For common events like <code>press</code> or <code>type</code>, use the <a href=
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"my placeholder"</span><span style="color:var(--shiki-token-function)"> onBlur</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onBlurMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)">// you can omit the `on` prefix</span></span>
|
||||
@@ -83,7 +83,7 @@ Use the User Event <a href="/react-native-testing-library/14.x/docs/api/events/u
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TouchableOpacity</span><span style="color:var(--shiki-token-function)"> onPress</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onPressMock}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Press me</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">TouchableOpacity</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-constant)"> fireEvent</span><span style="color:var(--shiki-token-function)">.press</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Press me'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> eventData);</span></span>
|
||||
@@ -105,7 +105,7 @@ Use the User Event <a href="/react-native-testing-library/14.x/docs/api/events/u
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"Enter data"</span><span style="color:var(--shiki-token-function)"> onChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onChangeTextMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-constant)"> fireEvent</span><span style="color:var(--shiki-token-function)">.changeText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByPlaceholderText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Enter data'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-constant)"> CHANGE_TEXT</span><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
@@ -133,7 +133,7 @@ Prefer <a href="/react-native-testing-library/14.x/docs/api/events/user-event#sc
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-token-function)"> testID</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"scroll-view"</span><span style="color:var(--shiki-token-function)"> onScroll</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onScrollMock}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Content</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-constant)"> fireEvent</span><span style="color:var(--shiki-token-function)">.scroll</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByTestId</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'scroll-view'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> eventData);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div><!--/$--></div><div class="container-uhcWmO"><img class="logo-IwzwG8" src="/react-native-testing-library/static/image/abstract-atom.4eca0300ff.avif" alt="Abstract Logo" aria-hidden="true"/><div class="content-uJxcIj"><div class="headlineContainer-NHNT4y"><h1 class="headline-iCUUUl">Need React or React Native
|
||||
|
||||
@@ -28,7 +28,7 @@ test('fire changeText event', async () => {
|
||||
await render(
|
||||
// MyComponent renders TextInput which has a placeholder 'Enter details'
|
||||
// and with `onChangeText` bound to handleChangeText
|
||||
<MyComponent handleChangeText={onEventMock} />
|
||||
<MyComponent handleChangeText={onEventMock} />,
|
||||
);
|
||||
|
||||
await fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab');
|
||||
@@ -51,7 +51,7 @@ const onBlurMock = jest.fn();
|
||||
await render(
|
||||
<View>
|
||||
<TextInput placeholder="my placeholder" onBlur={onBlurMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// you can omit the `on` prefix
|
||||
@@ -92,7 +92,7 @@ await render(
|
||||
<TouchableOpacity onPress={onPressMock}>
|
||||
<Text>Press me</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
await fireEvent.press(screen.getByText('Press me'), eventData);
|
||||
@@ -124,7 +124,7 @@ const CHANGE_TEXT = 'content';
|
||||
await render(
|
||||
<View>
|
||||
<TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
await fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
|
||||
@@ -163,7 +163,7 @@ const eventData = {
|
||||
await render(
|
||||
<ScrollView testID="scroll-view" onScroll={onScrollMock}>
|
||||
<Text>Content</Text>
|
||||
</ScrollView>
|
||||
</ScrollView>,
|
||||
);
|
||||
|
||||
await fireEvent.scroll(screen.getByTestId('scroll-view'), eventData);
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -30,7 +30,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> onTimeout</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> (error</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Error</span><span style="color:var(--shiki-foreground)">) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> Error</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>Waits for the <code>expectation</code> callback to pass. <code>waitFor</code> runs the callback multiple times until timeout is reached, as specified by the <code>timeout</code> and <code>interval</code> options. The callback must throw an error when the expectation is not met. Returning any value, including a falsy one, is treated as meeting the expectation, and the callback result is returned to the caller.</p>
|
||||
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-function)"> waitFor</span><span style="color:var(--shiki-foreground)">(() </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(mockFunction)</span><span style="color:var(--shiki-token-function)">.toHaveBeenCalledWith</span><span style="color:var(--shiki-foreground)">());</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
@@ -81,7 +81,7 @@ Avoiding side effects in <code>expectation</code> callback can be partially enfo
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> () </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(someFunction)</span><span style="color:var(--shiki-token-function)">.toHaveBeenCalledWith</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 10000</span><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> { timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 10000</span><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<div class="rp-callout rp-callout--note"><div class="rp-callout__title">Note</div><div class="rp-callout__content"><p>
|
||||
If you receive warnings related to <code>act()</code> function consult our <a href="/react-native-testing-library/14.x/docs/advanced/understanding-act" class="rp-link">Understanding Act</a> function document.</p></div></div>
|
||||
@@ -98,7 +98,7 @@ If you receive warnings related to <code>act()</code> function consult our <a hr
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> onTimeout</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> (error</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Error</span><span style="color:var(--shiki-foreground)">) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> Error</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>Waits for non-deterministic periods of time until queried element is removed or times out. <code>waitForElementToBeRemoved</code> periodically calls <code>expectation</code> every <code>interval</code> milliseconds to determine whether the element has been removed or not.</p>
|
||||
<div class="rp-codeblock language-jsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="jsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { render</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> screen</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> waitForElementToBeRemoved } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> '@testing-library/react-native'</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
|
||||
@@ -13,7 +13,7 @@ function waitFor<T>(
|
||||
timeout?: number;
|
||||
interval?: number;
|
||||
onTimeout?: (error: Error) => Error;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -93,7 +93,7 @@ await waitFor(
|
||||
() => {
|
||||
expect(someFunction).toHaveBeenCalledWith();
|
||||
},
|
||||
{ timeout: 10000 }
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
```
|
||||
|
||||
@@ -116,7 +116,7 @@ function waitForElementToBeRemoved<T>(
|
||||
timeout?: number;
|
||||
interval?: number;
|
||||
onTimeout?: (error: Error) => Error;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -24,7 +24,7 @@
|
||||
<h2 class="rp-toc-include" id="renderhook"><a href="#renderhook" class="rp-header-anchor rp-link" aria-hidden="true">#</a><code>renderHook</code></h2>
|
||||
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">async</span><span style="color:var(--shiki-token-keyword)"> function</span><span style="color:var(--shiki-token-function)"> renderHook</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">Result</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-function)"> Props</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> hookFn</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> (props</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Props</span><span style="color:var(--shiki-foreground)">) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-token-function)"> Result</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderHookOptions</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">Props</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderHookOptions</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">Props</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">RenderHookResult</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">Result</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-function)"> Props</span><span style="color:var(--shiki-foreground)">>>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>Renders a test component that calls the provided <code>callback</code> (and any hooks it uses) on each render. Returns a Promise that resolves to a <a href="#renderhookresult" class="rp-link"><code>RenderHookResult</code></a> object.</p>
|
||||
<p><strong>This is the recommended default API</strong> for testing hooks. It uses async <code>act</code> internally to ensure all pending React updates are executed during rendering. This makes it compatible with async React features like <code>Suspense</code> boundaries and the <code>use()</code> hook.</p>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
```ts
|
||||
async function renderHook<Result, Props>(
|
||||
hookFn: (props: Props) => Result,
|
||||
options?: RenderHookOptions<Props>
|
||||
options?: RenderHookOptions<Props>,
|
||||
): Promise<RenderHookResult<Result, Props>>;
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -126,7 +126,7 @@ In order for <code>*ByRole</code> queries to match an element it needs to be con
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-token-function)"> accessibilityRole</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"button"</span><span style="color:var(--shiki-token-function)"> disabled</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> element</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'button'</span><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-token-constant)"> element2</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'button'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Hello'</span><span style="color:var(--shiki-foreground)"> });</span></span>
|
||||
@@ -309,12 +309,14 @@ Following <a href="https://testing-library.com/docs/guiding-principles" target="
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">expect</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hidden from accessibility'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> includeHiddenElements</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> false</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)">// Include hidden elements</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">expect</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hidden from accessibility'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { includeHiddenElements</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hidden from accessibility'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> includeHiddenElements</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> true</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<h2 class="rp-toc-include" id="textmatch-type"><a href="#textmatch-type" class="rp-header-anchor rp-link" aria-hidden="true">#</a>TextMatch type</h2>
|
||||
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">type</span><span style="color:var(--shiki-token-function)"> TextMatch</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> string</span><span style="color:var(--shiki-token-keyword)"> |</span><span style="color:var(--shiki-token-function)"> RegExp</span><span style="color:var(--shiki-foreground)">;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
|
||||
@@ -183,7 +183,7 @@ import { render, screen } from '@testing-library/react-native';
|
||||
await render(
|
||||
<Pressable accessibilityRole="button" disabled>
|
||||
<Text>Hello</Text>
|
||||
</Pressable>
|
||||
</Pressable>,
|
||||
);
|
||||
const element = screen.getByRole('button');
|
||||
const element2 = screen.getByRole('button', { name: 'Hello' });
|
||||
@@ -401,12 +401,14 @@ await render(<Text style={{ display: 'none' }}>Hidden from accessibility</Text>)
|
||||
expect(
|
||||
screen.queryByText('Hidden from accessibility', {
|
||||
includeHiddenElements: false,
|
||||
})
|
||||
}),
|
||||
).not.toBeOnTheScreen();
|
||||
|
||||
// Include hidden elements
|
||||
expect(
|
||||
screen.getByText('Hidden from accessibility', { includeHiddenElements: true })
|
||||
screen.getByText('Hidden from accessibility', {
|
||||
includeHiddenElements: true,
|
||||
}),
|
||||
).toBeOnTheScreen();
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -24,7 +24,7 @@
|
||||
<h2 class="rp-toc-include" id="render"><a href="#render" class="rp-header-anchor rp-link" aria-hidden="true">#</a><code>render</code> function</h2>
|
||||
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">async</span><span style="color:var(--shiki-token-keyword)"> function</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> element</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> React</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-function)">ReactElement</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderOptions</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderOptions</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">RenderResult</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>The <code>render</code> function is the entry point for writing React Native Testing Library tests. It deeply renders the given React element and returns helpers to query the output. The function is async and uses async <code>act</code> internally, so all pending React updates run before it resolves. This works with async React features like <code>Suspense</code> boundaries and the <code>use()</code> hook.</p>
|
||||
<div class="rp-codeblock language-jsx"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="jsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { render</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> screen } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> '@testing-library/react-native'</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
```ts
|
||||
async function render<T>(
|
||||
element: React.ReactElement<T>,
|
||||
options?: RenderOptions
|
||||
options?: RenderOptions,
|
||||
): Promise<RenderResult>;
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -86,7 +86,10 @@
|
||||
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { StyleSheet } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> 'react-native'</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.debug</span><span style="color:var(--shiki-foreground)">({</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> mapProps</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> ({ style</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-keyword)"> ...</span><span style="color:var(--shiki-foreground)">props }) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-foreground)"> ({ style</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> StyleSheet</span><span style="color:var(--shiki-token-function)">.flatten</span><span style="color:var(--shiki-foreground)">(style)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-keyword)"> ...</span><span style="color:var(--shiki-foreground)">props })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> mapProps</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> ({ style</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-keyword)"> ...</span><span style="color:var(--shiki-foreground)">props }) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-foreground)"> ({</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> style</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> StyleSheet</span><span style="color:var(--shiki-token-function)">.flatten</span><span style="color:var(--shiki-foreground)">(style)</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> ...</span><span style="color:var(--shiki-foreground)">props</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">});</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>Or remove props that have little value when debugging tests, e.g. path prop for svgs</p>
|
||||
<div class="rp-codeblock language-ts"><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="ts"><code><span class="line"><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.debug</span><span style="color:var(--shiki-foreground)">({ </span><span style="color:var(--shiki-token-function)">mapProps</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-foreground)"> ({ path</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-keyword)"> ...</span><span style="color:var(--shiki-foreground)">props }) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-foreground)"> ({ </span><span style="color:var(--shiki-token-keyword)">...</span><span style="color:var(--shiki-foreground)">props }) });</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
@@ -116,7 +119,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-token-function)"> testID</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"root-view"</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // root is the View element you rendered</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-constant)">root</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-constant)">props</span><span style="color:var(--shiki-foreground)">.testID)</span><span style="color:var(--shiki-token-function)">.toBe</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'root-view'</span><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
|
||||
@@ -124,7 +124,10 @@ You can also transform prop values so that they are more readable (e.g., flatten
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
screen.debug({
|
||||
mapProps: ({ style, ...props }) => ({ style: StyleSheet.flatten(style), ...props }),
|
||||
mapProps: ({ style, ...props }) => ({
|
||||
style: StyleSheet.flatten(style),
|
||||
...props,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
@@ -186,7 +189,7 @@ test('example', async () => {
|
||||
await render(
|
||||
<View testID="root-view">
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
// root is the View element you rendered
|
||||
expect(screen.root.props.testID).toBe('root-view');
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -58,7 +58,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> aria-label</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"Username"</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"Enter username"</span><span style="color:var(--shiki-token-function)"> value</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">""</span><span style="color:var(--shiki-foreground)"> /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // ✅ Good - uses accessible label</span></span>
|
||||
@@ -83,7 +83,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Submit</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> role</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"searchbox"</span><span style="color:var(--shiki-token-function)"> aria-label</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"Search"</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"Search..."</span><span style="color:var(--shiki-foreground)"> /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // ✅ Good - uses role query</span></span>
|
||||
@@ -115,7 +115,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-token-function)"> role</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"button"</span><span style="color:var(--shiki-token-function)"> aria-disabled</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Submit</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">Pressable</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> const</span><span style="color:var(--shiki-token-constant)"> button</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.getByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'button'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Submit'</span><span style="color:var(--shiki-foreground)"> });</span></span>
|
||||
@@ -144,7 +144,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // ✅ Good - uses queryBy for non-existence check</span></span>
|
||||
@@ -230,7 +230,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> const</span><span style="color:var(--shiki-foreground)"> { </span><span style="color:var(--shiki-token-constant)">container</span><span style="color:var(--shiki-foreground)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-token-function)"> testID</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"message"</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // ❌ Bad - using container.queryAll directly</span></span>
|
||||
@@ -267,7 +267,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> const</span><span style="color:var(--shiki-foreground)"> { </span><span style="color:var(--shiki-token-constant)">getByText</span><span style="color:var(--shiki-foreground)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-function)">getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hello'</span><span style="color:var(--shiki-foreground)">))</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
@@ -280,7 +280,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Hello'</span><span style="color:var(--shiki-foreground)">))</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
@@ -374,7 +374,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello World</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // ✅ Good - queries by visible text</span></span>
|
||||
@@ -415,7 +415,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> await</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Hello</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // ✅ Good - getBy throws if not found, so it's an assertion</span></span>
|
||||
|
||||
@@ -34,7 +34,7 @@ test('finds input by label', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<TextInput aria-label="Username" placeholder="Enter username" value="" />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - uses accessible label
|
||||
@@ -65,7 +65,7 @@ test('uses role queries', async () => {
|
||||
<Text>Submit</Text>
|
||||
</Pressable>
|
||||
<TextInput role="searchbox" aria-label="Search" placeholder="Search..." />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - uses role query
|
||||
@@ -104,7 +104,7 @@ test('button is disabled', async () => {
|
||||
await render(
|
||||
<Pressable role="button" aria-disabled>
|
||||
<Text>Submit</Text>
|
||||
</Pressable>
|
||||
</Pressable>,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: 'Submit' });
|
||||
@@ -139,7 +139,7 @@ test('checks non-existence', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - uses queryBy for non-existence check
|
||||
@@ -243,7 +243,7 @@ test('finds element incorrectly', async () => {
|
||||
const { container } = await render(
|
||||
<View>
|
||||
<Text testID="message">Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ❌ Bad - using container.queryAll directly
|
||||
@@ -293,7 +293,7 @@ test('renders component', async () => {
|
||||
const { getByText } = await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
expect(getByText('Hello')).toBeOnTheScreen();
|
||||
@@ -310,7 +310,7 @@ test('renders component', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('Hello')).toBeOnTheScreen();
|
||||
@@ -422,7 +422,7 @@ test('finds text correctly', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello World</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - queries by visible text
|
||||
@@ -489,7 +489,7 @@ test('uses getBy as assertion', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - getBy throws if not found, so it's an assertion
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -162,7 +162,7 @@ bun add -D test-renderer@1.2</span></span></code></pre></div><div class="rp-code
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">expect</span><span style="color:var(--shiki-foreground)">(onPress)</span><span style="color:var(--shiki-token-function)">.toHaveBeenCalledWith</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> expect</span><span style="color:var(--shiki-token-function)">.objectContaining</span><span style="color:var(--shiki-foreground)">({</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> nativeEvent</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> expect</span><span style="color:var(--shiki-token-function)">.objectContaining</span><span style="color:var(--shiki-foreground)">({ pageX</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 20</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> pageY</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> 30</span><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>If your v13 assertions expected the handler to receive exactly the object you passed to <code>fireEvent.press()</code> or <code>fireEvent.scroll()</code>, update them to use partial matching.</p>
|
||||
<h4 class="rp-toc-include" id="act-is-now-async"><a href="#act-is-now-async" class="rp-header-anchor rp-link" aria-hidden="true">#</a><code>act</code> is now async</h4>
|
||||
|
||||
@@ -289,7 +289,7 @@ await fireEvent.press(screen.getByText('Press me'), {
|
||||
expect(onPress).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
nativeEvent: expect.objectContaining({ pageX: 20, pageY: 30 }),
|
||||
})
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
+38
-33
@@ -424,7 +424,7 @@ test('User can sign in with correct credentials', async () => {
|
||||
|
||||
// Follow-up assertions do not need to be async, as we already waited for sign in operation to complete
|
||||
expect(
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' })
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' }),
|
||||
).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
|
||||
@@ -463,7 +463,7 @@ Each query has a default `timeout` value of 1000 ms and a default `interval` of
|
||||
const button = await screen.findByRole(
|
||||
'button',
|
||||
{ name: 'Start' },
|
||||
{ timeout: 1000, interval: 50 }
|
||||
{ timeout: 1000, interval: 50 },
|
||||
);
|
||||
```
|
||||
|
||||
@@ -483,7 +483,7 @@ function waitFor<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -507,7 +507,7 @@ function waitForElementToBeRemoved<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T> {}
|
||||
```
|
||||
|
||||
@@ -561,12 +561,12 @@ interface RenderWithProvidersProps {
|
||||
|
||||
export async function renderWithProviders<T>(
|
||||
ui: React.ReactElement<T>,
|
||||
options?: RenderWithProvidersProps
|
||||
options?: RenderWithProvidersProps,
|
||||
) {
|
||||
return await render(
|
||||
<UserProvider.Provider value={options?.user ?? null}>
|
||||
<ThemeProvider.Provider value={options?.theme ?? 'light'}>{ui}</ThemeProvider.Provider>
|
||||
</UserProvider.Provider>
|
||||
</UserProvider.Provider>,
|
||||
);
|
||||
}
|
||||
```
|
||||
@@ -781,10 +781,10 @@ export interface RenderWithAtomsOptions {
|
||||
*/
|
||||
export async function renderWithAtoms<T>(
|
||||
component: React.ReactElement,
|
||||
options: RenderWithAtomsOptions
|
||||
options: RenderWithAtomsOptions,
|
||||
) {
|
||||
return await render(
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1350,7 +1350,7 @@ test('fire changeText event', async () => {
|
||||
await render(
|
||||
// MyComponent renders TextInput which has a placeholder 'Enter details'
|
||||
// and with `onChangeText` bound to handleChangeText
|
||||
<MyComponent handleChangeText={onEventMock} />
|
||||
<MyComponent handleChangeText={onEventMock} />,
|
||||
);
|
||||
|
||||
await fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab');
|
||||
@@ -1373,7 +1373,7 @@ const onBlurMock = jest.fn();
|
||||
await render(
|
||||
<View>
|
||||
<TextInput placeholder="my placeholder" onBlur={onBlurMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// you can omit the `on` prefix
|
||||
@@ -1414,7 +1414,7 @@ await render(
|
||||
<TouchableOpacity onPress={onPressMock}>
|
||||
<Text>Press me</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
await fireEvent.press(screen.getByText('Press me'), eventData);
|
||||
@@ -1446,7 +1446,7 @@ const CHANGE_TEXT = 'content';
|
||||
await render(
|
||||
<View>
|
||||
<TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
await fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
|
||||
@@ -1485,7 +1485,7 @@ const eventData = {
|
||||
await render(
|
||||
<ScrollView testID="scroll-view" onScroll={onScrollMock}>
|
||||
<Text>Content</Text>
|
||||
</ScrollView>
|
||||
</ScrollView>,
|
||||
);
|
||||
|
||||
await fireEvent.scroll(screen.getByTestId('scroll-view'), eventData);
|
||||
@@ -2059,7 +2059,7 @@ function waitFor<T>(
|
||||
timeout?: number;
|
||||
interval?: number;
|
||||
onTimeout?: (error: Error) => Error;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -2139,7 +2139,7 @@ await waitFor(
|
||||
() => {
|
||||
expect(someFunction).toHaveBeenCalledWith();
|
||||
},
|
||||
{ timeout: 10000 }
|
||||
{ timeout: 10000 },
|
||||
);
|
||||
```
|
||||
|
||||
@@ -2162,7 +2162,7 @@ function waitForElementToBeRemoved<T>(
|
||||
timeout?: number;
|
||||
interval?: number;
|
||||
onTimeout?: (error: Error) => Error;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -2370,7 +2370,7 @@ url: /react-native-testing-library/14.x/docs/api/misc/render-hook.md
|
||||
```ts
|
||||
async function renderHook<Result, Props>(
|
||||
hookFn: (props: Props) => Result,
|
||||
options?: RenderHookOptions<Props>
|
||||
options?: RenderHookOptions<Props>,
|
||||
): Promise<RenderHookResult<Result, Props>>;
|
||||
```
|
||||
|
||||
@@ -2731,7 +2731,7 @@ import { render, screen } from '@testing-library/react-native';
|
||||
await render(
|
||||
<Pressable accessibilityRole="button" disabled>
|
||||
<Text>Hello</Text>
|
||||
</Pressable>
|
||||
</Pressable>,
|
||||
);
|
||||
const element = screen.getByRole('button');
|
||||
const element2 = screen.getByRole('button', { name: 'Hello' });
|
||||
@@ -2949,12 +2949,14 @@ await render(<Text style={{ display: 'none' }}>Hidden from accessibility</Text>)
|
||||
expect(
|
||||
screen.queryByText('Hidden from accessibility', {
|
||||
includeHiddenElements: false,
|
||||
})
|
||||
}),
|
||||
).not.toBeOnTheScreen();
|
||||
|
||||
// Include hidden elements
|
||||
expect(
|
||||
screen.getByText('Hidden from accessibility', { includeHiddenElements: true })
|
||||
screen.getByText('Hidden from accessibility', {
|
||||
includeHiddenElements: true,
|
||||
}),
|
||||
).toBeOnTheScreen();
|
||||
```
|
||||
|
||||
@@ -3067,7 +3069,7 @@ url: /react-native-testing-library/14.x/docs/api/render.md
|
||||
```ts
|
||||
async function render<T>(
|
||||
element: React.ReactElement<T>,
|
||||
options?: RenderOptions
|
||||
options?: RenderOptions,
|
||||
): Promise<RenderResult>;
|
||||
```
|
||||
|
||||
@@ -3248,7 +3250,10 @@ You can also transform prop values so that they are more readable (e.g., flatten
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
screen.debug({
|
||||
mapProps: ({ style, ...props }) => ({ style: StyleSheet.flatten(style), ...props }),
|
||||
mapProps: ({ style, ...props }) => ({
|
||||
style: StyleSheet.flatten(style),
|
||||
...props,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
@@ -3310,7 +3315,7 @@ test('example', async () => {
|
||||
await render(
|
||||
<View testID="root-view">
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
// root is the View element you rendered
|
||||
expect(screen.root.props.testID).toBe('root-view');
|
||||
@@ -3359,7 +3364,7 @@ test('finds input by label', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<TextInput aria-label="Username" placeholder="Enter username" value="" />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - uses accessible label
|
||||
@@ -3390,7 +3395,7 @@ test('uses role queries', async () => {
|
||||
<Text>Submit</Text>
|
||||
</Pressable>
|
||||
<TextInput role="searchbox" aria-label="Search" placeholder="Search..." />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - uses role query
|
||||
@@ -3429,7 +3434,7 @@ test('button is disabled', async () => {
|
||||
await render(
|
||||
<Pressable role="button" aria-disabled>
|
||||
<Text>Submit</Text>
|
||||
</Pressable>
|
||||
</Pressable>,
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: 'Submit' });
|
||||
@@ -3464,7 +3469,7 @@ test('checks non-existence', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - uses queryBy for non-existence check
|
||||
@@ -3568,7 +3573,7 @@ test('finds element incorrectly', async () => {
|
||||
const { container } = await render(
|
||||
<View>
|
||||
<Text testID="message">Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ❌ Bad - using container.queryAll directly
|
||||
@@ -3618,7 +3623,7 @@ test('renders component', async () => {
|
||||
const { getByText } = await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
expect(getByText('Hello')).toBeOnTheScreen();
|
||||
@@ -3635,7 +3640,7 @@ test('renders component', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
expect(screen.getByText('Hello')).toBeOnTheScreen();
|
||||
@@ -3747,7 +3752,7 @@ test('finds text correctly', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello World</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - queries by visible text
|
||||
@@ -3814,7 +3819,7 @@ test('uses getBy as assertion', async () => {
|
||||
await render(
|
||||
<View>
|
||||
<Text>Hello</Text>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// ✅ Good - getBy throws if not found, so it's an assertion
|
||||
@@ -4758,7 +4763,7 @@ await fireEvent.press(screen.getByText('Press me'), {
|
||||
expect(onPress).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
nativeEvent: expect.objectContaining({ pageX: 20, pageY: 30 }),
|
||||
})
|
||||
}),
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -48,7 +48,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'header'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Sign in to Hello World App'</span><span style="color:var(--shiki-foreground)"> })</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)"> screen</span><span style="color:var(--shiki-token-function)">.queryByRole</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'header'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> { name</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-string-expression)"> 'Sign in to Hello World App'</span><span style="color:var(--shiki-foreground)"> })</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> ).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.queryByLabelText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Username'</span><span style="color:var(--shiki-foreground)">)).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> expect</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.queryByLabelText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Password'</span><span style="color:var(--shiki-foreground)">)).</span><span style="color:var(--shiki-token-constant)">not</span><span style="color:var(--shiki-token-function)">.toBeOnTheScreen</span><span style="color:var(--shiki-foreground)">();</span></span>
|
||||
@@ -81,7 +81,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>;</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>It accepts an <code>expectation</code> to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to <code>findBy*</code> queries they accept <code>timeout</code> and <code>interval</code> options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms.</p>
|
||||
<h4 class="rp-toc-include" id="example-2"><a href="#example-2" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Example</h4>
|
||||
@@ -94,7 +94,7 @@
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> timeout</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> interval</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-constant)"> number</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> Promise</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">> {}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<p>This function is, in a way, the negation of <code>waitFor</code> as it expects the initial expectation to be true (not throw an error), only to turn invalid (start throwing errors) on subsequent runs. It operates using the same <code>timeout</code> and <code>interval</code> parameters as <code>findBy*</code> queries and <code>waitFor</code>.</p>
|
||||
<h4 class="rp-toc-include" id="example-3"><a href="#example-3" class="rp-header-anchor rp-link" aria-hidden="true">#</a>Example</h4>
|
||||
|
||||
@@ -32,7 +32,7 @@ test('User can sign in with correct credentials', async () => {
|
||||
|
||||
// Follow-up assertions do not need to be async, as we already waited for sign in operation to complete
|
||||
expect(
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' })
|
||||
screen.queryByRole('header', { name: 'Sign in to Hello World App' }),
|
||||
).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
|
||||
expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
|
||||
@@ -87,7 +87,7 @@ function waitFor<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T>;
|
||||
```
|
||||
|
||||
@@ -111,7 +111,7 @@ function waitForElementToBeRemoved<T>(
|
||||
options?: {
|
||||
timeout: number;
|
||||
interval: number;
|
||||
}
|
||||
},
|
||||
): Promise<T> {}
|
||||
```
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -33,12 +33,12 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> function</span><span style="color:var(--shiki-token-function)"> renderWithProviders</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> ui</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> React</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-function)">ReactElement</span><span style="color:var(--shiki-foreground)"><</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderWithProvidersProps</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">?:</span><span style="color:var(--shiki-token-function)"> RenderWithProvidersProps</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">) {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> return</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-token-function)"> value</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">?.user </span><span style="color:var(--shiki-token-keyword)">??</span><span style="color:var(--shiki-token-constant)"> null</span><span style="color:var(--shiki-foreground)">}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">ThemeProvider.Provider</span><span style="color:var(--shiki-token-function)"> value</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">?.theme </span><span style="color:var(--shiki-token-keyword)">??</span><span style="color:var(--shiki-token-string-expression)"> 'light'</span><span style="color:var(--shiki-foreground)">}>{ui}</</span><span style="color:var(--shiki-token-constant)">ThemeProvider.Provider</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">UserProvider.Provider</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">}</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
<div class="rp-codeblock language-tsx"><div class="rp-codeblock__title">custom-render/index.test.tsx</div><div class="rp-codeblock__content"><div class="rp-codeblock__content__scroll-container rp-scrollbar rp-scrollbar--always"><pre class="shiki css-variables" style="background-color:var(--shiki-background);color:var(--shiki-foreground)" tabindex="0" data-lang="tsx" data-title="custom-render/index.test.tsx"><code><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-foreground)"> { screen } </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-token-string-expression)"> '@testing-library/react-native'</span><span style="color:var(--shiki-foreground)">;</span></span>
|
||||
|
||||
@@ -16,12 +16,12 @@ interface RenderWithProvidersProps {
|
||||
|
||||
export function renderWithProviders<T>(
|
||||
ui: React.ReactElement<T>,
|
||||
options?: RenderWithProvidersProps
|
||||
options?: RenderWithProvidersProps,
|
||||
) {
|
||||
return render(
|
||||
<UserProvider.Provider value={options?.user ?? null}>
|
||||
<ThemeProvider.Provider value={options?.theme ?? 'light'}>{ui}</ThemeProvider.Provider>
|
||||
</UserProvider.Provider>
|
||||
</UserProvider.Provider>,
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -116,10 +116,10 @@ corresponding values as an argument.</p>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> */</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-token-keyword)"> const</span><span style="color:var(--shiki-token-constant)"> renderWithAtoms</span><span style="color:var(--shiki-token-keyword)"> =</span><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-function)">T</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)">>(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> component</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> React</span><span style="color:var(--shiki-foreground)">.</span><span style="color:var(--shiki-token-function)">ReactElement</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> RenderWithAtomsOptions</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> options</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-token-function)"> RenderWithAtomsOptions</span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-foreground)"> {</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-keyword)"> return</span><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-token-function)"> initialValues</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">.initialValues}>{component}</</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-token-function)"> initialValues</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{</span><span style="color:var(--shiki-token-constant)">options</span><span style="color:var(--shiki-foreground)">.initialValues}>{component}</</span><span style="color:var(--shiki-token-constant)">HydrateAtomsWrapper</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">};</span></span>
|
||||
<span class="line"></span>
|
||||
|
||||
@@ -110,10 +110,10 @@ export interface RenderWithAtomsOptions {
|
||||
*/
|
||||
export const renderWithAtoms = <T,>(
|
||||
component: React.ReactElement,
|
||||
options: RenderWithAtomsOptions
|
||||
options: RenderWithAtomsOptions,
|
||||
) => {
|
||||
return render(
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>
|
||||
<HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
@@ -35,7 +35,7 @@ more realistic event simulation by emitting a sequence of events with proper eve
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // MyComponent renders TextInput which has a placeholder 'Enter details'</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)"> // and with `onChangeText` bound to handleChangeText</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">MyComponent</span><span style="color:var(--shiki-token-function)"> handleChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onEventMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">MyComponent</span><span style="color:var(--shiki-token-function)"> handleChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onEventMock} /></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> );</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-function)"> fireEvent</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByPlaceholderText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'change'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> 'onChangeText'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-string-expression)"> 'ab'</span><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
@@ -52,7 +52,7 @@ more realistic event simulation by emitting a sequence of events with proper eve
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"my placeholder"</span><span style="color:var(--shiki-token-function)"> onBlur</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onBlurMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-comment)">// you can omit the `on` prefix</span></span>
|
||||
@@ -82,7 +82,7 @@ It is recommended to use the User Event <a href="/react-native-testing-library/d
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TouchableOpacity</span><span style="color:var(--shiki-token-function)"> onPress</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onPressMock}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>Press me</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">TouchableOpacity</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)">fireEvent</span><span style="color:var(--shiki-token-function)">.press</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Press me'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> eventData);</span></span>
|
||||
@@ -104,7 +104,7 @@ It is recommended to use the User Event <a href="/react-native-testing-library/d
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">TextInput</span><span style="color:var(--shiki-token-function)"> placeholder</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"Enter data"</span><span style="color:var(--shiki-token-function)"> onChangeText</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onChangeTextMock} /></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">View</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)">fireEvent</span><span style="color:var(--shiki-token-function)">.changeText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByPlaceholderText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'Enter data'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-token-constant)"> CHANGE_TEXT</span><span style="color:var(--shiki-foreground)">);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
@@ -132,7 +132,7 @@ Prefer using <a href="/react-native-testing-library/docs/api/events/user-event#s
|
||||
<span class="line"><span style="color:var(--shiki-token-function)">render</span><span style="color:var(--shiki-foreground)">(</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-token-function)"> onScroll</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-foreground)">{onScrollMock}></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> <</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">>XD</</span><span style="color:var(--shiki-token-constant)">Text</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-foreground)">></span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)"> </</span><span style="color:var(--shiki-token-constant)">ScrollView</span><span style="color:var(--shiki-foreground)">></span><span style="color:var(--shiki-token-punctuation)">,</span></span>
|
||||
<span class="line"><span style="color:var(--shiki-foreground)">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:var(--shiki-token-constant)">fireEvent</span><span style="color:var(--shiki-token-function)">.scroll</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-constant)">screen</span><span style="color:var(--shiki-token-function)">.getByText</span><span style="color:var(--shiki-foreground)">(</span><span style="color:var(--shiki-token-string-expression)">'scroll-view'</span><span style="color:var(--shiki-foreground)">)</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-foreground)"> eventData);</span></span></code></pre></div><div class="rp-code-button-group"><button class="rp-code-button-group__button rp-code-wrap-button" title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrapped"><path fill="currentColor" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="rp-code-button-group__icon rp-code-button-group__icon--wrap"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="rp-code-button-group__button rp-code-copy-button" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="272" height="272" viewBox="0 0 272 272" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--copy"><path fill="currentColor" fill-rule="evenodd" d="M45.883 23.368h123.823v22.514H68.396v146.336H45.883zm45.026 45.027H225.99v180.107H90.91zm22.514 22.513v135.08h90.053V90.908z" clip-rule="evenodd"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="271" height="271" viewBox="0 0 271 271" class="rp-code-button-group__icon rp-code-copy-button__icon rp-code-copy-button__icon--success"><path fill="currentColor" d="M112.687 203.223H90.174v-22.514h22.512v-22.514h22.512v22.514h-22.511zm-22.514-22.514H67.66v-22.514h22.513zm-22.514-22.514H45.146v-22.512H67.66zm90.054 0h-22.514v-22.512h22.514zm22.514-22.512h-22.514v-22.514h22.514zm22.513-22.514h-22.513V90.655h22.513zm22.514-22.514H202.74V68.143h22.514z"></path></svg></button></div></div></div>
|
||||
|
||||
@@ -25,7 +25,7 @@ test('fire changeText event', () => {
|
||||
render(
|
||||
// MyComponent renders TextInput which has a placeholder 'Enter details'
|
||||
// and with `onChangeText` bound to handleChangeText
|
||||
<MyComponent handleChangeText={onEventMock} />
|
||||
<MyComponent handleChangeText={onEventMock} />,
|
||||
);
|
||||
|
||||
fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab');
|
||||
@@ -48,7 +48,7 @@ const onBlurMock = jest.fn();
|
||||
render(
|
||||
<View>
|
||||
<TextInput placeholder="my placeholder" onBlur={onBlurMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
// you can omit the `on` prefix
|
||||
@@ -89,7 +89,7 @@ render(
|
||||
<TouchableOpacity onPress={onPressMock}>
|
||||
<Text>Press me</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
fireEvent.press(screen.getByText('Press me'), eventData);
|
||||
@@ -121,7 +121,7 @@ const CHANGE_TEXT = 'content';
|
||||
render(
|
||||
<View>
|
||||
<TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
|
||||
</View>
|
||||
</View>,
|
||||
);
|
||||
|
||||
fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
|
||||
@@ -160,7 +160,7 @@ const eventData = {
|
||||
render(
|
||||
<ScrollView onScroll={onScrollMock}>
|
||||
<Text>XD</Text>
|
||||
</ScrollView>
|
||||
</ScrollView>,
|
||||
);
|
||||
|
||||
fireEvent.scroll(screen.getByText('scroll-view'), eventData);
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<script defer src="/react-native-testing-library/static/js/lib-react.49604bf759.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/lib-router.a0df4de158.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/2482.4740a55c68.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.5d61bfb5d3.js"></script>
|
||||
<script defer src="/react-native-testing-library/static/js/index.57322732e5.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="generator" content="Rspress v2.0.9">
|
||||
<meta property="og:url" content="https://oss.callstack.com/react-native-testing-library/">
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user